Onmouseover et div

**archimede49** · 15/12/2008, 10h20

Bonjour,

Je suis en train de me prendre la tête sur un onmouseover et le paramètre display des div ...

Je voudrais afficher une carte de Paris et que lorsqu'on survol un arrondissement l'arrondissement change de couleur. J'ai une carte avec chaque arrondissement dans une autre couleur en stock.

Voici le lien

Si quelqu'un peut m'aider ...

Voici une partie du contenu de ma balise <head>

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
 
 
<style>
 
.TabOff1 {
	CURSOR: hand; 
	overflow: hidden;
	font-size: 10px;
	background: url(../templates/paris_massages/images/menu_fiche1-off.gif) top left no-repeat;
	overflow: hidden;	
	width: 160px;
	height: 50px;
}
 
.TabOff2 {
	CURSOR: hand; 
	overflow: hidden;
	font-size: 10px;
	background: url(../templates/paris_massages/images/menu_fiche2-off.gif) top left no-repeat;
	overflow: hidden;	
	width: 160px;
	height: 50px;
}
 
.TabOff3 {
	CURSOR: hand; 
	overflow: hidden;
	font-size: 10px;
	background: url(../templates/paris_massages/images/menu_fiche3-off.gif) top left no-repeat;
	overflow: hidden;	
	width: 160px;
	height: 50px;
}
 
.TabOn1 {
	CURSOR: default; 
	background: url(../templates/paris_massages/images/menu_fiche1-on.gif) top left no-repeat;
	overflow: hidden;
	width: 160px;
	height: 100px;
	}
.TabOn2 {
	CURSOR: default; 
	background: url(../templates/paris_massages/images/menu_fiche2-on.gif) top left no-repeat;
	overflow: hidden;
	width: 160px;
	height: 100px;
	}
.TabOn3 {
	CURSOR: default; 
	background: url(../templates/paris_massages/images/menu_fiche3-on.gif) top left no-repeat;
	overflow: hidden;
	width: 160px;
	height: 100px;
	}
 
 
.fiche {
	width: 483px;
	padding: 5px 0px;
	background: url(../templates/paris_massages/images/fond_fiche.jpg) 30px 58px no-repeat;
	line-height: 1.6em; 
	}
 
</style>
<script>
function TabClick( nTab ){
Col = document.getElementsByName("content");
for (i = 0; i < document.getElementsByName("content").length; i++)
{
	if (i==0) {
	document.getElementsByName("tabs")[i].className = "TabOff1";
	document.getElementsByName("content")[i].style.display = "none";
	}
	if (i==1) {
	document.getElementsByName("tabs")[i].className = "TabOff2";
	document.getElementsByName("content")[i].style.display = "none";
	}
	if (i==2) {
	document.getElementsByName("tabs")[i].className = "TabOff3";
	document.getElementsByName("content")[i].style.display = "none";
	}
}
 
	if (nTab==0) {
		document.getElementsByName("content")[nTab].style.display = "block";
		document.getElementsByName("tabs")[nTab].className = "TabOn1";
	}
	if (nTab==1) {
		document.getElementsByName("content")[nTab].style.display = "block";
		document.getElementsByName("tabs")[nTab].className = "TabOn2";
	}
	if (nTab==2) {
		document.getElementsByName("content")[nTab].style.display = "block";
		document.getElementsByName("tabs")[nTab].className = "TabOn3";
	}
}
 
function mouseOver(nTab){
	if (nTab==0) {
		document.getElementsByName("tabs")[0].className = "TabOn1";
		document.getElementsByName("tabs")[1].className = "TabOff2";
		document.getElementsByName("tabs")[2].className = "TabOff3";
	}
	if (nTab==1) {
		document.getElementsByName("tabs")[0].className = "TabOff1";
		document.getElementsByName("tabs")[1].className = "TabOn2";	
		document.getElementsByName("tabs")[2].className = "TabOff3";
	}
	if (nTab==2) {
		document.getElementsByName("tabs")[0].className = "TabOff1";
		document.getElementsByName("tabs")[1].className = "TabOff2";
		document.getElementsByName("tabs")[2].className = "TabOn3";
	}
}
 
 
function mouseOut(){
		document.getElementsByName("tabs")[0].className = "TabOff1";
		document.getElementsByName("tabs")[1].className = "TabOff2";
		document.getElementsByName("tabs")[2].className = "TabOff3";
}
 
function mouseOverMap(){
	document.getElementById("1").style.display = "yes";
 
 
}
 
function mouseOverMapAll(){
	document.getElementById("paris").style.display = "yes";
	document.getElementById("1").style.display = "none";
	document.getElementById("2").style.display = "none";
	document.getElementById("3").style.display = "none";
	document.getElementById("4").style.display = "none";
	document.getElementById("5").style.display = "none";
	document.getElementById("6").style.display = "none";
	document.getElementById("7").style.display = "none";
	document.getElementById("8").style.display = "none";
	document.getElementById("9").style.display = "none";
	document.getElementById("10").style.display = "none";
	document.getElementById("11").style.display = "none";
	document.getElementById("12").style.display = "none";
	document.getElementById("13").style.display = "none";
	document.getElementById("14").style.display = "none";
	document.getElementById("15").style.display = "none";
	document.getElementById("16").style.display = "none";
	document.getElementById("17").style.display = "none";
	document.getElementById("18").style.display = "none";
	document.getElementById("19").style.display = "none";
	document.getElementById("20").style.display = "none";
}
 
</script>

Et le code html

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
 
 
	<div id="paris" name="paris">
        <img border="0" usemap="#map-paris" src="<?php echo $mosConfig_live_site; ?>/templates/paris_massages/images/paris.png" alt="carte paris" width="345" height="290" class="fltrt2"/>
	    </div>
		<div id="1" name="1">
        <img border="0" usemap="#map-paris" src="<?php echo $mosConfig_live_site; ?>/templates/paris_massages/images/1.png" alt="carte paris" width="345" height="290" class="fltrt2"/>
	    </div>
 
 
 
		<map name="map-paris">
			<area shape="poly" coords="184,201,198,165,215,172,230,181,238,190,228,204,223,209,208,209,199,209,190,207,184,201,184,201" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75005" onmouseout="mouseOverMapAll();"">
			<area shape="poly" coords="181,201,164,193,156,188,146,183,158,174,166,167,173,157,176,150,195,161,190,176,182,197,180,200,181,201" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75006"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="138,182,134,176,122,178,114,166,101,152,95,150,104,140,119,137,134,137,148,139,166,146,173,150,165,162,156,172,141,183,138,182,138,182" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75007"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="117,242,95,235,85,229,69,225,66,229,52,236,48,240,51,230,46,222,41,222,47,213,57,196,65,183,78,169,85,161,93,152,103,164,108,170,118,179,122,181,131,179,137,186,147,190,156,194,148,206,129,228,115,242,116,241,117,242" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75015"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="194,274,178,275,172,266,158,257,143,251,133,247,120,243,136,227,149,210,158,197,173,203,192,211,194,236,194,253,197,274,194,274" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75014"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="284,249,240,193,232,205,220,212,209,215,198,213,194,211,197,242,201,270,201,274,231,274,239,272,254,264,274,253,285,249,284,248,284,249" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75013"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="289,243,260,205,243,186,248,167,261,172,275,176,299,180,324,183,339,187,335,200,331,213,324,228,316,235,300,241,289,243,288,241,287,241,289,243" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75012"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="309,177,297,156,297,150,291,139,277,124,267,109,295,104,313,96,327,93,327,88,331,96,337,127,338,161,338,183,307,177,309,176,309,177" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75020"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="248,164,244,148,239,122,261,109,272,120,289,148,303,176,269,168,247,163,248,164" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75011"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="206,150,209,141,231,148,240,159,244,168,241,178,239,181,230,166,223,161,215,156,205,152,206,150,209,147,206,150" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75004"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="202,149,154,135,161,115,182,125,199,132,209,135,202,150,202,149" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75001" onmouseover="mouseOverMap();" onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="239,152,236,121,219,116,213,138,238,151,239,152" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75003"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="169,115,187,109,197,109,208,112,216,116,209,132,193,126,169,116,169,115,169,115" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75002"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="152,131,135,130,125,129,121,129,115,129,108,122,106,110,105,99,105,90,118,88,128,86,139,82,154,77,160,76,164,77,161,86,159,103,155,118,151,131,151,131,152,131" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75008"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="164,112,166,74,173,74,185,74,198,76,208,76,205,100,205,107,194,107,185,107,175,110,168,111,164,112,164,112" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75009"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="208,107,210,93,213,76,218,74,241,74,247,74,249,83,256,99,261,106,253,111,243,116,237,116,218,111,208,108,208,107" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75010"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="266,104,258,99,255,90,253,81,252,70,241,70,245,58,250,44,253,39,250,23,271,25,287,26,297,31,302,42,305,60,307,75,318,80,327,86,325,87,314,93,298,97,280,101,265,103,271,62,272,62,266,104" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75019"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="166,67,164,57,166,44,166,39,170,25,177,23,198,22,227,22,247,22,247,35,245,46,243,58,235,65,227,69,220,74,200,73,181,72,166,69,166,67,184,46,166,67" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75018"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="100,99,74,87,76,75,85,64,104,52,121,44,133,37,139,34,153,25,152,22,166,22,165,28,163,38,160,44,159,55,158,63,161,71,134,79,112,86,105,87,101,99,105,70,100,99" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75017"  onmouseout="mouseOverMapAll();">
			<area shape="poly" coords="31,221,58,181,87,146,99,136,108,131,103,118,100,107,94,101,88,97,73,90,67,97,64,103,59,109,56,114,56,118,37,122,34,130,33,142,32,150,28,156,21,162,16,170,15,183,15,198,18,209,24,217,28,221,32,222,33,171,31,221" href="http://www.parismassages.fr/index.php?option=com_jdirectory&task=show_category&catid=5&order=0&directory=1&Itemid=31&content_zip=75016"  onmouseout="mouseOverMapAll();">
		</map>

**RomainVALERI** · 15/12/2008, 10h28

Deux remarques :

- style.display="yes" ??? oO plutôt bizarre... sachant que la valeur la plus courante pour un DIV est "block", et que la manière habituelle de remettre un DIV "à la normale" serait display="", qui rend à l'élément sa valeur par défaut, en l'occurrence "block" pour un DIV.

- tu devrais probablement placer les informations de style et de script de ta page dans des fichiers séparés, que tu appellerais respectivement depuis ton <head> avec les balises <link> et <script>. (Cette deuxième remarque n'a cependant probablement aucun rapport avec le problème ponctuel que tu rencontres, c'était juste un conseil de forme pour l'organisation générale de ton site)

**archimede49** · 15/12/2008, 11h06

Tu as raison j'ai déjà allégé mon code en plaçant ceci :

Code :

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

1
2
3
 
<link href="http://www.parismassages.fr/templates/paris_massages/css/carte.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.parismassages.fr/templates/paris_massages/js/carte.js"></script>

Mais ca ne résoud pas le problème ...

**le_chomeur** · 15/12/2008, 11h23

voici un tutorial ( en anglais ) expliquant le mouseover sur des shape :
http://www.htmlgoodies.com/tutorials...le.php/3479771

Onmouseover et div

JavaScript

Discussions similaires

Partager

Partager