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