Bonjour,

Voila j'ai r�alis� une carte cliquable avec AREA, une balise de HTML. Et ensuite je voulais afficher des etiquettes ou info-bulles � chaque fois que l'on passait dessus, avec OnMouseOver et OnMouseOut, se que j'arrive � faire.

Mais ensuite j'ai voulu que lorsque la souris passe sur la zone cliquable le contour s'affiche, j'ai donc utilis� mapper.js.

Le soucis, c'est que mapper.js fonctionne tr�s bien, mais si je le mets, alors les �tiquette ne s'affiche plus. Quelq'un peu m'aider, voici mon code :

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
82
83
84
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="encoreessai2.css" />
 
<script type="text/javascript" src="mapper/wz_jsgraphics.js"></script>
<script type="text/javascript" src="mapper/mapper.js"></script>
 
<script language="javascript" type="text/javascript">
<!--script pour la position de l'etiquette à côté de la souris et pour afficher ou désafficher l'ettiquette
var showed = false;
function move(e) {
	if(showed) {
		if (navigator.appName!="Microsoft Internet Explorer") {
		document.getElementById("desc").style.left=e.pageX + 5+"px";
		document.getElementById("desc").style.top=e.pageY + 10+"px";
		}
		else {
			if(document.documentElement.clientWidth>0) {
				document.getElementById("desc").style.left=20+event.x+document.documentElement.scrollLeft+"px";
				document.getElementById("desc").style.top=10+event.y+document.documentElement.scrollTop+"px";
			} else {
				document.getElementById("desc").style.left=20+event.x+document.body.scrollLeft+"px";
				document.getElementById("desc").style.top=10+event.y+document.body.scrollTop+"px";
			}
		}
	}
}
function show(txt) {
	if(showed==false) {	
		document.getElementById("desc").style.visibility="visible";		
		document.getElementById("desc").innerHTML = txt;
		showed=true;
	}
}
function unshow() {
	if(showed==true) {
		document.getElementById("desc").style.visibility="hidden";
		showed=false;
	}
}
 
function clic(invi,visib){
document.getElementById(visib).style.display="inline";
document.getElementById(invi).style.display="none";
}
 
document.onmousemove=move;
//-->
</script>
 
</head>
<body>
 
<div id="desc" style="position:absolute; visibility:hidden; border:1px solid maroon; padding:10px; font-size:10px; background-color: red;"></div>
 
<div id="prem">
 
<img src="1.jpg" width="1100" height="850" border="0" usemap="#map" style="border:2px solid red;" class = "mapper iborder00aa00 icolor00ff00" />
<map name="map">
<area onMouseOver="show('<strong>Europe</strong>');" onMouseOut="unshow();" onClick="clic('prem','deux');" shape="circle" coords="538,338,38" />
<area onMouseOver="show('Autre');" onMouseOut="unshow();" title="seconde image" shape="poly" coords="209,228,154,171,177,111,204,94,307,87,350,136,377,217,320,246,267,186,268,234,260,305,173,322,201,238,202,228" href="encoreessai2.php?param1=Foucher&param2=Elliott" />
</map>
</div>
 
<div id="deux" ; style="display:none;">
<img src="2.jpg" width="1152" height="864" border="0" usemap="#map2" />
 
<map name="map2">
 
<area onMouseOver="show('Portugal');" onMouseOut="unshow();" shape="poly" coords="196,500,149,514,131,507,109,506,109,479,81,465,76,430,124,358,201,369,234,403,240,470,204,499"  href="encoreessai2.php?param1=Foucher&param2=Elliott" />
<area onMouseOver="show('France');" onMouseOut="unshow();" shape="poly" coords="422,535,384,561,308,535,297,451,287,375,325,336,402,321,449,342,491,436,498,513,426,534,426,535,428,534"  href="encoreessai2.php?param1=Foucher&param2=Elliott" />
<area onMouseOver="show('Suisse');" onMouseOut="unshow();" shape="poly" coords="514,519,515,435,558,434,609,416,625,456,629,513,610,550,571,561,519,545,517,534"  href="encoreessai2.php?param1=Foucher&param2=Elliott" />
<area onMouseOver="show('Danemark');" onMouseOut="unshow();" shape="poly" coords="735,83,614,37,547,85,519,169,525,247,600,331,665,372,726,380,823,318,878,227,811,152,753,94"  href="encoreessai2.php?param1=Negre&param2=Vanessa" />
<area onMouseOver="show('Grèce');" onMouseOut="unshow();" shape="poly" coords="1003,550,929,578,799,575,731,533,750,474,828,379,911,347,1023,350,1053,458,1038,535,999,549"  href="encoreessai2.php?param1=Negre&param2=Vanessa" />
</map>
</div>
 
 
</body>
</html>

J'ai l'impression que mapper.js et OnMouseOver ainsi OnMouseOut ne peuvent pas cohabiter.


Si quelqu'un peut m'aider.

Merci d'avance