Discussion :

[elekaj34]

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

[insane1]

Je suis plutot adepte de:

Pour cacher

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display='none'

Pour afficher

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display='block'

[elekaj34]

J'ai essayé avec des display, mais le problème est identique

[Bovino]

Salut,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
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';
}

A chaque survol, tu décales ton image vers la droite et le bas, donc au 2e survol, elle doit être en dehors de l'espace visible de la page

[elekaj34]

Salut,

A chaque survol, tu décales ton image vers la droite et le bas, donc au 2e survol, elle doit être en dehors de l'espace visible de la page

JE SUIS UN ANE, désolé pour le dérangement.

PS : En fait, l'image se décale unique vers la droite.