Bonjour,

Sur une image, je dois afficher au survol de certaines zones une bulle d'informations.

Voici le code HTML:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<img id="depmap" name="map" src="http://localhost/squelettes/dessin.php?d=34" alt="" title=""  usemap="#carte_dep" />
<div id="id0" class="id-info" >
	mon texte d'info
</div>
<div id="id1" class="id-info" >
	mon texte d'info 1
</div>
....
<map id="cartelr_dep" name="carte_dep">
	<area class="info" shape="circle" coords="585,389,8" onmouseover="show('id0',585,389);" onmouseout="hide('id0');" href="/carte.php?v=id0" alt="" />
	<area class="info" shape="circle" coords="732,257,8" onmouseover="show('id1',732,257);" onmouseout="hide('id1');" href="/carte.php?v=id1" alt="" />
...
 
</map>
et maintenant le JavaScript (inclus dans le head) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
		<script type="text/javascript">
			function show(arg,x,y) {
				var map=document.getElementById('depmap');
				document.getElementById(arg).style.left = document.getElementById(arg).style.left + map.style.left + x + 'px';
				document.getElementById(arg).style.top = map.style.top+ y + 'px';
				document.getElementById(arg).style.visibility = 'visible';
			}
			function hide(arg) {
				document.getElementById(arg).style.visibility = 'hidden';
			}
			// -->
		</script>
	</head>
Avec FF, Safari etc, cela fonctionne au poil, par contre, avec IE (7 & 8, je suppose aussi le 6) lorsque survol pour la première fois, cela fonctionne au poil. Par contre, au second survol, le cadre css ne s'affiche pas.

PS : Si vous avez une meilleure méthode pour les survols, je suis preneur