Positionnement image onmouseover

Bonjour,

Je suis débutant en javascript, merci d'avance pour votre indulgence.
J'ai une carte sur laquelle je fait apparaitre une image en fonction des régions sur lesquelles on passe son curseur. Le script fonctionne correctement mais l'image reste en bas à droite peu importe les paramètres que je donne.
Voir site : www.latreve.be

J'aimerais que l'image soit à côté de la région.

Voici le code :
page html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="style.css" rel="stylesheet" type="text/css" /> 	
<link href="http://www.latreve.be/wp-includes/css/style2.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="http://www.latreve.be/wp-content/themes/latreve3/ajax.js"></script>
<script type="text/javascript" src="http://www.latreve.be/wp-content/themes/latreve3/tooltip.js"></script>
 
<div>
<center><img alt="" src="/wp-admin/images/carte petit.png" usemap="#map" width="300" height="421" border="0"></center>
 
<map name="map">
 
 <area onmouseover="showtrail(300,195,'http://www.latreve.be/wp-content/themes/latreve3/images/vielsalm.jpg')" onmouseout="hidetrail()" coords="210,74,203,90,229,94,278,70,280,84,294,78,290,44,251,30,243,38,246,62,257,63,251,69" shape="poly" href="http://www.letreve.be" /> 
 
<area onmouseover="showtrail(310,195,'http://www.latreve.be/wp-content/themes/latreve3/images/Bastogne2.jpg')" onmouseout="hidetrail()" coords="208,162,206,184,195,188,208,210,213,235,217,237,228,223,247,196,252,165,238,162,234,150,225,140,224,141" shape="poly" href="http://www.latreve.be/bastogne" /> 
 
<area coords="188,417,191,405,198,388,190,365,177,360,178,368,165,366,158,396,164,417" shape="poly" href="http://www.latreve.be/virton" /> <area coords="214,375,221,402,230,403,236,395,245,400,260,391,265,379,252,381,250,384,219,370" shape="poly" href="http://www.latreve.be/athus" /> 
 
<area coords="211,351,205,333,210,328,221,331,236,318,239,325,259,313,263,324,261,335,270,346,265,364,244,348,225,367,226,367" shape="poly" href="http://www.latreve.be/arlon" /> </map></img>
</div>

code Tooltip.js :

Code:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var w=1
var h=1
 
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute";visibility:hidden;left:0px;top:0px;width:1px;height:1px;border:1px solid #888888;background:#01D4B8;"><img id="ttimg" src="img/s.gif" /></div>')
 
function gettrailobj()
{
	if (document.getElementById) return document.getElementById("trailimageid").style
	else if (document.all) return document.all.trailimagid.style
}
 
function truebody()
{
	return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function hidetrail()
{
	document.onmousemove=""
	document.getElementById('ttimg').src='/img/s.gif'
	gettrailobj().visibility="hidden"
	gettrailobj().left=0
	gettrailobj().top=0
}
 
 
function showtrail(width,height,file)
{
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
	{
		w=width
		h=height
 
		// followmouse()
 
		document.getElementById('ttimg').src=file
		document.onmousemove=followmouse
		gettrailobj().visibility="visible"
		gettrailobj().width=w+"px"
		gettrailobj().height=h+"px"
 
 
	}
}
 
 
function followmouse(e)
{
 
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
	{
 
		var xcoord=20
		var ycoord=20
 
		if (typeof e != "undefined")
		{
			xcoord+=e.pageX
			ycoord+=e.pageY
		}
		else if (typeof window.event !="undefined")
		{
			xcoord+=truebody().scrollLeft+event.clientX
			ycoord+=truebody().scrollTop+event.clientY
		}
 
		var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
		var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
 
		if (xcoord+w+3>docwidth)
		xcoord=xcoord-w-(20*2)
		if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
		ycoord=ycoord-h-20;
 
		gettrailobj().left=xcoord+"px"
		gettrailobj().top=ycoord+"px"
 
	}
 
}

Voila, je ne sais pas si j'ai été clair.

Si quelqu'un peut m'aider a trouver la ou les erreurs, un grand merci d'avance.

Bonjour,
il te faudrait tenir compte du décalage de son parent, je m'explique ton infoBulle est en position absolute et donc se positionne par rapport à son premier parent positionné qui est, il m'a semblé être, la <div class="art-layout-cell art-content"> à vérifier quand même.

Change la place de ton infoBulle.

PS: le code pourrait être fortement simplifié, il date un peu quand même.

merci

Merci, pour ta réponse.

Malheureusement, je ne vois pas comment la positionner correctement par rapport à son premier parent. Impossible de décaler l'image vers le haut.
J'ai essayé dans tout les sens, je désespère.

J'en demande beaucoup mais aurait un exemple de code simplifié qui me permettrait de faire la même chose.

Merci pour ton temps.

re

Bonjour,

J'ai changé le code et ça fonctionne.

Un grand merci pour votre aide. :ccool: