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