Javascript
younes
-
prosthetiks Messages postés 1309 Statut Membre -
prosthetiks Messages postés 1309 Statut Membre -
Bonjour,
je veux que le tableaux s'affiche a coté du curseur mais pas au dessu d'une image
ce tableau doit etre comme un information
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/JavaScript">
function voir(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('sasa.jpg'); background-repeat: no-repeat">
<img src="wal2.jpg" width="378" height="194" border="0" usemap="#hoveredMap" id="hovered" />
<map name="hoveredMap" id="hoveredMap">
<area shape="rect" coords="159,50,279,141" href="#" onMouseOver="voir('tool', 'table');" onMouseOut="voir('tool', 'none');" />
</map>
</div>
<table width="300" height="100" border="1" bgcolor="#999999" id="tool" style="display:none;">
<tr>
<td>
<div class="tooltip" >
<h3 style="padding:0px; margin:0px"><center>Lot N° 34</center></h3>
<label>Superficie : </label>97,00 m<sup>2</sup><br />
<ul>
</ul>
<div class="order">
<center>
<a href="javascript: void(0)" onclick="">
<div align="right">Réservez en ligne</div>
</a>
</center>
</div>
</div>
<script>
</script>
</td>
</tr>
</table>
</body>
</html>
je veux que le tableaux s'affiche a coté du curseur mais pas au dessu d'une image
ce tableau doit etre comme un information
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/JavaScript">
function voir(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('sasa.jpg'); background-repeat: no-repeat">
<img src="wal2.jpg" width="378" height="194" border="0" usemap="#hoveredMap" id="hovered" />
<map name="hoveredMap" id="hoveredMap">
<area shape="rect" coords="159,50,279,141" href="#" onMouseOver="voir('tool', 'table');" onMouseOut="voir('tool', 'none');" />
</map>
</div>
<table width="300" height="100" border="1" bgcolor="#999999" id="tool" style="display:none;">
<tr>
<td>
<div class="tooltip" >
<h3 style="padding:0px; margin:0px"><center>Lot N° 34</center></h3>
<label>Superficie : </label>97,00 m<sup>2</sup><br />
<ul>
</ul>
<div class="order">
<center>
<a href="javascript: void(0)" onclick="">
<div align="right">Réservez en ligne</div>
</a>
</center>
</div>
</div>
<script>
</script>
</td>
</tr>
</table>
</body>
</html>
1 réponse
-
Hello,
voici un proto:
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css" media="screen"> .info-box{ display:none; position:absolute; padding:20px; background-color:orange; } </style> </head> <body> <img src="http://lorempixel.com/400/200/people" data-box="lorem_info2"/> <div id="lorem_info2" class="info-box"> Aide de l'image loremInfo 2 </div> <img src="http://lorempixel.com/400/200/sports" data-box="lorem_info"/> <div id="lorem_info" class="info-box"> Ici l'aide correspondant à l'image <img src="http://lorempixel.com/50/50"/> </div> </body> <script type="text/javascript"> var Interface = []; Interface.infobox = { _initialize: function(){ this.addEventsListener(); }, addEventsListener: function(){ var self = this; document.addEventListener('mousemove', function(e){self.catchMouseTarget(e)}); }, catchMouseTarget: function(e){ var target = e.target.getAttribute('data-box'); if((lastTarget !== null) && (lastTarget != target)){ document.getElementById(lastTarget).style.display = 'none'; } lastTarget = target; if(target){ document.getElementById(target).style.top = e.clientY + 20; document.getElementById(target).style.left = e.clientX + 20; document.getElementById(target).style.display = 'block'; } } } var lastTarget = null; var infobox = Interface.infobox._initialize(); </script> </html>
