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:
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>
