positionner une bulle d'info

**elekaj34** · 17/08/2009, 12h12

Bonjour,

J'ai une image, dans le div net, à laquelle j'ai associé des zones cliquables. Au survol, il y a un changement de carte et aussi l'affichage du bulle d'informations.

Sauf que la bulle d'informations doit être positionnée en x et y relativement au coin haut gauche de la carte de base (balise img du div "net")

Le pb, c'est qu'avec le code ci-dessous, la bulle d'info est positionnée relativement au coin haut gauche de la fenêtre d'affichage du navigateur (IE et Firefox & Co).
Pour info, si j'affiche map.style.left, celui ci est vide

Une idée pour résoudre mon pb ?

Voici le code complet

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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" xml:lang="fr" lang="fr">
	<head>
		<title>Carte et détails du réseau</title>
		<script type="text/javascript">
			var preloadFlag = false;
			function preloadImages() {
				if (document.images) {
					survol_hg = newImage("squelettes/images/fond_net_hg.jpg");
					survol_hd = newImage("squelettes/images/fond_net_hd.jpg");
					survol_bg = newImage("squelettes/images/fond_net_bg.jpg");
					survol_bd = newImage("squelettes/images/fond_net_bd.jpg");
					survol_centre = newImage("squelettes/images/fond_net_centre.jpg");
					preloadFlag = true;
 
				}
			function changeImages() {
				if (document.images && (preloadFlag == true)) {
					for (var i=0; i<changeImages.arguments.length; i+=2) {
						document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
					}
				}
			}
 
			function show(arg,x,y) {
				var map=document.getElementById('netmap');
				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>
 
	<body onload="preloadImages()">
 
		<div id="page">
			<div id="net">
				<img id="netmap" name="net" src="squelettes/images/fond_net.jpg" width="605" height="505" border="0" usemap="#net_map" alt="" />
				<map id="net_map" name="net_map">
					<area shape="poly" coords="135,193,253,193,281,65,237,84,200,110,167,142,145,172,140,183,140,182" href="#" alt=""
						onmouseover="changeImages('net', 'squelettes/images/fond_net_hg.jpg'); show('div_hg',79,20); return true;"
						onmouseout="changeImages('net', 'squelettes/images/fond_net.jpg'); hide('div_hg'); return true;"/>
					<area shape="poly" coords="384,192,411,65,433,75,456,91,472,109,491,138,499,166,505,192,503,192" href="#URL_ARTICLE{1}" alt=""
						onmouseover="changeImages('net', 'squelettes/images/fond_net_hd.jpg'); show('div_hd',430,78); return true;"
						onmouseout="changeImages('net', 'squelettes/images/fond_net.jpg'); hide('div_hd'); return true;"/>
					<area shape="poly" coords="226,318,106,318,110,344,120,370,135,398,160,426,191,444,199,447" href="#URL_ARTICLE{23}" alt=""
						onmouseover="changeImages('net', 'squelettes/images/fond_net_bg.jpg'); show('div_bg',22,365); return true;"
						onmouseout="changeImages('net', 'squelettes/images/fond_net.jpg'); hide('div_bg'); return true;"/>
					<area shape="poly" coords="355,318,480,319,456,356,436,379,398,414,363,435,344,442,327,451,328,451" href="#URL_ARTICLE{4}" alt=""
						onmouseover="changeImages('net', 'squelettes/images/fond_net_bd.jpg'); show('div_bd',366,377); return true;"
						onmouseout="changeImages('net', 'squelettes/images/fond_net.jpg'); hide('div_bd'); return true;"/>
					<area shape="poly" coords="269,215,356,215,338,302,250,302" href="#URL_ARTICLE{15}" alt=""
						onmouseover="changeImages('net', 'squelettes/images/fond_net_centre.jpg'); show('div_centre',182,269); return true;"
						onmouseout="changeImages('net', 'squelettes/images/fond_net.jpg'); hide('div_centre'); return true;"/>
				</map>
			</div> <!-- fin div "net" -->
		</div>
	</body>
</html>

**Sergejack** · 17/08/2009, 14h19

Tu peux essayer ça :

Code :

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

<div id="net" style="float: left; position: relative;">

position: relative, en fera la référence pour le positionnement de ses enfants, eux même positionnés en absolu.
float: left, fera que ton div net aura la largeur minimal et non 100% de l'espace disponible.

**elekaj34** · 18/08/2009, 19h23

Bon j'ai pas réussi a mieux avec ta methode

Par contre, avec la mienne (désolé je persiste), j'y suis enfin arrivé en faisant comme ceci pour la fonction show

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('netmap');
	document.getElementById(arg).style.left = map.offsetLeft + x + 'px';
	document.getElementById(arg).style.top = map.offsetTop + y + 'px';
	document.getElementById(arg).style.visibility='visible';
}

utilisation de map.offset(Left|Top) au lieu de map.style.(left|top)
et çà marche

par contre, sous firefox, au survol de la div, il y a un clignotement

TRES genant (mais pas sous IE)

positionner une bulle d'info

JavaScript

Discussions similaires

Partager

Partager