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

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"

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

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 :

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

14/02/2011, 16h13	#5
l'coy Invité de passage Elliott Foucher Inscription : février 2011 Messages : 30 Détails du profil Informations personnelles : Nom : Elliott Foucher Informations forums : Inscription : février 2011 Messages : 30 Points : 2 Points : 2	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
	00

12/02/2011, 14h26	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	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 ?
	00

13/02/2011, 15h42	#3
l'coy Invité de passage Elliott Foucher Inscription : février 2011 Messages : 30 Détails du profil Informations personnelles : Nom : Elliott Foucher Informations forums : Inscription : février 2011 Messages : 30 Points : 2 Points : 2	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email