OnMouseOver et mapper.js

Version imprimable

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:

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

12/02/2011, 14h26
NoSmoking

Bonjour,
il est possible que dans ton fichier mapper.js il y est un détournement des actions sur le mouseover et/ou le mouseout.

Cela est à vérifier dans le code, et dans ce cas peut être passer par un addEventListener ou un attachEvent pour IE.

As tu une page en ligne ?
13/02/2011, 15h42
l'coy

Non je n'ai pas de page en ligne. Le truc bizarre c'est que les OnClick fonctionne mais pas les OnMouseOver et OnMouseOut. Comment vérifier s'il y a un détournement dans le fichier mapper.js.

Ok pour un addEventListener ou un attachEvent pour IE, mais pour firefox et les autres, on fait comment.

Il doit y avoir des solutions pour OnMouseOver et OnMouseOut
13/02/2011, 16h37
NoSmoking

Citation:

Comment vérifier s'il y a un détournement dans le fichier mapper.js.

recherches dans la source si les occurrences mouseover et/ou mouseout existent et ce à quoi elles sont associées.

Citation:

Ok pour un addEventListener ou un attachEvent pour IE, mais pour firefox et les autres, on fait comment.

- attachEvent pour IE
- addEventListener pour les W3C "respect"
14/02/2011, 16h13
l'coy

Il y a bien des occurrences de OnMouseOver et de OnMouseOut mais le code est bien trop complexe pour moi pour savoir à quoi ils sont associés.

J'ai trouvé un site où il affiche des étiquettes avec les bordures des AREA en utilisant les événements OnMouseOver et OnmouseOut, mais le soucis c'est que lorsque je fais la même chose cela ne produit rien,pourquoi?

Voici le site : http://www.netzgesta.de/mapper/

il utilise ceci :

Code:

tooltip="Antarctica" onmouseover="cvi_tip._show(event);" onmouseout="cvi_tip._hide(event);"

Mais je n'arrive pas à les maitriser

Si vous pouvez m'aider

Merci
14/02/2011, 18h49
NoSmoking

Citation:

Envoyé par l'coy

il utilise ceci :

tooltip="Antarctica" onmouseover="cvi_tip._show(event);" onmouseout="cvi_tip._hide(event);"

il n'utilise pas que cela exemple

Code:

onmousemove="getCoords(event,'map_of_world','map_of_world_10','world',32,373,800,400,1200,2796);cvi_tip._move(event);"

cela signifie en à peu près clair
j'appelle la fonction getCoords puis j'appelle la fonction cvi_tip.move, il y a enchainement de fonction.

Merci de ton aide, il fallait bien ajouter :

Code:

1
2
3
4
 
tooltip="Antarctica" onmouseover="cvi_tip._show(event);" onmouseout="cvi_tip._hide(event);" et ceci : 
 
onmousemove="cvi_tip._move(event);"

et il fallait en plus y ajouter :

Code:

1
2
 
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="tooltip.css" />

avec dedans tout se qu'il faut :

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
 
#cvi_tooltip {
	display:none;
	position:absolute;
	padding:4px 8px;
	color: #666666;
	text-shadow: white 0px 1px 0px;
	background: #ffdd00;
	/*background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(255,224,0)));
	background-image: -moz-linear-gradient(top, rgb(255,255,255), rgb(255,224,0));*/
	font: 100% Arial, Helvetica, sans-serif;
	font-weight: bold;
	border: 1px solid orange;
	max-width: 240px;
	min-width: 30px;
	border-radius: 8px;
	-moz-border-radius: 8px;	
	-khtml-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: rgba(40,20,0,.66) 0px 0px 8px; /*ombre*/
	-moz-box-shadow: rgba(40,20,0,.66) 0px 0px 8px;
	-webkit-box-shadow: rgba(40,20,0,.66) 0px 0px 8px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}