OnMouseOver et mapper.js

**l'coy** · 12/02/2011, 12h06

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

**NoSmoking** · 12/02/2011, 14h26

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 ?

**l'coy** · 13/02/2011, 15h42

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

**NoSmoking** · 13/02/2011, 16h37

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.

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"

**l'coy** · 14/02/2011, 16h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 14/02/2011, 18h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**l'coy** · 15/02/2011, 18h44

Merci de ton aide, il fallait bien ajouter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

avec dedans tout se qu'il faut :

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
 
#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;
}

OnMouseOver et mapper.js

JavaScript

Discussions similaires

Partager

Partager