afficher les infos d'une bdd avec un area shape

Invité · 07/10/2011, 13h39

Bonjour

Voilà j'ai un souis je voudrai afficher les infos contenu dans un champ d'une table et je voudrais les afficher au passage de la souris !

Donc j'ai déjà un script qui fonctionne mais je n'arrive pas a piocher dans la BDD !

Voilà le code de la page complète :

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
 
<?php
include ('includes/bdd.php');
require("includes/langue.php");
?>
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Elena Deudero Ibiza</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css" >
/*<![CDATA[*/
#info {
	position: absolute;
	width: 350px;
	top: 180px;
  left: 50%;      
  margin-left: -175px; 
	z-index: 1;
	color: #c8ddda;
	background-color: #242424;
	visibility: hidden;
	border: solid 2px #222;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	font-weight: bold;
	text-align: center;
	font-family: Courier, "Courier New", monospace;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function afficher(info)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
        run= true ;
}
function masquer(info)
{
        var tooltip = document.getElementById(info) ;
        tooltip.style.visibility = "hidden";
        run= false ;
}
//]]>
</script>
</head>
<body>
<div id="Global">
 
<!-- start header -->
	<div id="Header">
      <div id="Header_ban"></div>
      <span style="margin-left:10px;"><a href="?lang=fr"><img src="images/lang/fr.jpg" title="Fran&ccedil;ais" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=en"><img src="images/lang/gb.jpg" title="English" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=es"><img src="images/lang/es.jpg" title="Espa&ntilde;ol" border="0" /></a></span>
      </span>
	  <?php include ('includes/menu.php');?>
	</div>
<!-- end header -->
 
<!-- start page -->
	<div id="Page">
 
<!-- start content -->
		<div id="Contenu">
			<div class="Texte">
				<div class="Haut"></div>
 
				<div class="Millieu">
                    <p align="center"><h1><?php echo TXT_BOUTIK_TITRE; ?></h1></p>
<!--------------------------------------------------------------------------------------------------------------------------->
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
 
<?php
//  on selectionne tous les département de France métropolitaine                   
$aff = "SELECT * FROM $tabl_carte ORDER BY id_dpt";
	$aff = mysql_db_query($bdd,$aff);
	//$nbzone = mysql_num_rows($aff);
	//$e=0;
 
	while ($row=mysql_fetch_array($aff)) {
		echo "<area href=\"#\" title=\"$row[id_dpt] - $row[titre_dpt]\" shape='polygon' coords='$row[area_dpt]'\" onmousemove=\"afficher('info')\" onmouseout=\"masquer('info')\">\n";
	}
?>
 
</map>
<br />
<div id="info">
<?php $aff = "SELECT * FROM $tabl_carte ORDER BY id_dpt";
	$aff = mysql_db_query($bdd,$aff);
?>
<p><?php echo $row['txt_dpt'];?></p>
</div>
<!--------------------------------------------------------------------------------------------------------------------------->
				</div>
 
				<div class="Bas"></div>
 
			</div>
		</div>
<!-- end content -->
 
		<div style="clear: both;">&nbsp;</div>
	</div>
<!-- end page --> 
</div>
<?php include ('includes/footer.php');?>
</body>
</html>

Dans ma div info

Code :

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

1
2
3
4
5
6
7
 
<div id="info">
<?php $aff = "SELECT * FROM $tabl_carte ORDER BY id_dpt";
	$aff = mysql_db_query($bdd,$aff);
?>
<p><?php echo $row['txt_dpt'];?></p>
</div>

Si je remplace ma div par

Code :

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

1
2
3
4
 
<div id="info">
<p>EXEMPLE</p>
</div>

Alors au survol j'ai bien EXEMPLE qui s'affiche !

Un petit coup de main SVP

**Marc3001** · 07/10/2011, 15h46

Et t'as une erreur ou juste rien du tout ?

Invité · 07/10/2011, 15h56

Bonjour et merci de t'ocupper de mon souis !

En premier lieu j'ai modifié donc voiçi ce que j'ai fait :

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
 
<?php
include ('includes/bdd.php');
require("includes/langue.php");
?>
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Elena Deudero Ibiza</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css" >
/*<![CDATA[*/
#info {
	position: absolute;
	width: auto;/*350px*/
	top: 300px;/*180px*/
	left: 40%;      
	margin-left: -80px; /*175*/
	z-index: 1;
	color: #c8ddda;
	background-color: #242424;
	visibility: hidden;
	border: solid 2px #222;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	font-weight: bold;
	text-align: center;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function afficher(info)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
        run= true ;
}
function masquer(info)
{
        var tooltip = document.getElementById(info) ;
        tooltip.style.visibility = "hidden";
        run= false ;
}
//]]>
</script>
</head>
<body>
<div id="Global">
 
<!-- start header -->
	<div id="Header">
      <div id="Header_ban"></div>
      <span style="margin-left:10px;"><a href="?lang=fr"><img src="images/lang/fr.jpg" title="Fran&ccedil;ais" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=en"><img src="images/lang/gb.jpg" title="English" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=es"><img src="images/lang/es.jpg" title="Espa&ntilde;ol" border="0" /></a></span>
      </span>
	  <?php include ('includes/menu.php');?>
	</div>
<!-- end header -->
 
<!-- start page -->
	<div id="Page">
 
<!-- start content -->
		<div id="Contenu">
			<div class="Texte">
				<div class="Haut"></div>
 
				<div class="Millieu">
                    <p align="center"><h1><?php echo TXT_BOUTIK_TITRE; ?></h1></p>
<!--------------------------------------------------------------------------------------------------------------------------->
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
 
<?php
//  on selectionne tous les département de France métropolitaine                   
$aff = "SELECT * FROM $tabl_carte ORDER BY id_dpt";
	$aff = mysql_db_query($bdd,$aff);
	//$nbzone = mysql_num_rows($aff);
	//$e=0;
 
	while ($row=mysql_fetch_array($aff)) {
		echo "<area href=\"#\" title=\"$row[id_dpt] - $row[titre_dpt]\" shape='polygon' coords='$row[area_dpt]'\" onmousemove=\"afficher('info')\" onmouseout=\"masquer('info')\">\n";
	}
?>
 
</map>
<br />
<div id="info">
<?php 
$aff = "SELECT * FROM $tabl_carte ORDER BY id_dpt";
$aff = mysql_query($aff,$bdd)or die(mysql_error());
while ($row = mysql_fetch_assoc($aff)) {
?>
<p><?php echo $row['txt_dpt'];?></p>
<?php
}
?>
</div>
<!--------------------------------------------------------------------------------------------------------------------------->
				</div>
 
				<div class="Bas"></div>
 
			</div>
		</div>
<!-- end content -->
 
		<div style="clear: both;">&nbsp;</div>
	</div>
<!-- end page --> 
</div>
<?php include ('includes/footer.php');?>
</body>
</html>

Maintenant j'ai une erreur :

Code :

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

Warning: mysql_query() : supplied argument is not a valid MySQL-Link ressoure in /XXXXXX/XXXXX/www/boutik.php on line 101

Et le script s'arrête :

Code :

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

1
2
3
<div id="info">
<br />
<b>Warning</b>:  mysql_query(): supplied argument is not a valid MySQL-Link resource in <b>/homez.87/elenadeu/www/boutik.php</b> on line <b>100</b><br />

Voilà tu sais tout !

**Marc3001** · 07/10/2011, 16h09

Cherche l'erreur :

Code :

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

1
2
Ligne 87 : mysql_query($bdd,$aff)
Ligne 101 : mysql_query($aff,$bdd)

**Marc3001** · 07/10/2011, 16h11

Je changerais aussi :

Code :

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

echo "<area href=\"#\" title=\"$row[id_dpt] - $row[titre_dpt]\" shape='polygon' coords='$row[area_dpt]'\" onmousemove=\"afficher('info')\" onmouseout=\"masquer('info')\">\n";

en :

Code :

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

echo "<area href=\"#\" title=\"".$row['id_dpt']." - ".$row['titre_dpt']."\" shape='polygon' coords='".$row['area_dpt']."'\" onmousemove=\"afficher('info')\" onmouseout=\"masquer('info')\">\n";

pour plus de lisibilité.

Invité · 07/10/2011, 16h26

Voilà j'ai repris un peu le code :
J'affiche pas tout mais uniquement la partie que j'ai modifié:

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
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
 
<?php
//  on selectionne tous les département de France métropolitaine //$nbzone = mysql_num_rows($aff); //$e=0;                 
$aff = "SELECT * FROM $tabl_carte ORDER BY id_dpt";
	$aff = mysql_db_query($bdd,$aff) or die(mysql_error());
 
	while ($row=mysql_fetch_array($aff)) {
		echo "<area href=\"#\" title=\"".$row['id_dpt']." - ".$row['titre_dpt']."\" shape='polygon' coords='".$row['area_dpt']."'\" onmousemove=\"afficher('info')\" onmouseout=\"masquer('info')\">\n";
	}
?>
 
</map>
<br />
<div id="info">
<?php 
$aff = "SELECT * FROM $tabl_carte ORDER BY id_dpt";
$aff = mysql_db_query($bdd,$aff) or die(mysql_error());
while ($row = mysql_fetch_array($aff)) {
?>
<p><?php echo $row['txt_dpt'];?></p>
<?php
}
?>
</div>

Maintnant j'ai plus d'erreur mais lorsque je survole les departement j'ai toujours le meme texte et même pire j'ai le texte de tout mais département !

Je pense que c'est une erreur dans la requete pour l'affichage !!
A éclaircir !
Merci de bien vouloir m'aider !

**Marc3001** · 07/10/2011, 16h37

Tu peux balancer le code source html généré?

Invité · 07/10/2011, 16h42

Oui bien sur mais c'est long !!!

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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
 
 
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Elena Deudero Ibiza</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css" >
/*<![CDATA[*/
#info {
	position: absolute;
	width: auto;/*350px*/
	top: 300px;/*180px*/
	left: 40%;      
	margin-left: -80px; /*175*/
	z-index: 1;
	color: #c8ddda;
	background-color: #242424;
	visibility: hidden;
	border: solid 2px #222;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	font-weight: bold;
	text-align: center;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function afficher(info)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
        run= true ;
}
function masquer(info)
{
        var tooltip = document.getElementById(info) ;
        tooltip.style.visibility = "hidden";
        run= false ;
}
//]]>
</script>
</head>
<body>
<div id="Global">
 
<!-- start header -->
	<div id="Header">
      <div id="Header_ban"></div>
      <span style="margin-left:10px;"><a href="?lang=fr"><img src="images/lang/fr.jpg" title="Fran&ccedil;ais" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=en"><img src="images/lang/gb.jpg" title="English" border="0" /></a>&nbsp;</span>
      <span style="margin-left:10px;"><a href="?lang=es"><img src="images/lang/es.jpg" title="Espa&ntilde;ol" border="0" /></a></span>
      </span>
	  <div id="Menu">
    <ul>
        <li><a href="index.php?lang=es">Bienvenida</a></li>
        <li><a href="vente_dom.php?lang=es">Venta privada</a></li>
        <li><a href="franchise.php?lang=es">Franquicia</a></li>
        <li><a href="boutik.php?lang=es">e.shop</a></li>
        <li><a href="contact.php?lang=es">Contacto</a></li>   
    </ul>
</div>	</div>
<!-- end header -->
 
<!-- start page -->
	<div id="Page">
 
<!-- start content -->
		<div id="Contenu">
			<div class="Texte">
				<div class="Haut"></div>
 
				<div class="Millieu">
                    <p align="center"><h1>e.shop</h1></p>
<!--------------------------------------------------------------------------------------------------------------------------->
 
<div class="map"> 
<img style="border:0pt none;opacity:0;" src="France.png" width="500" height="570" usemap="#france"> 
</div>
<map name="france">
 
<area href="#" title="01 - Ain" shape='polygon' coords='422,267,425,269,425,275,419,278,419,283,416,286,414,286,414,295,412,307,407,313,397,299,394,300,391,304,386,303,380,303,377,298,374,298,371,290,373,282,378,263,384,264,388,263,393,266,397,273,400,274,400,276,402,276,406,272,409,274,409,276,413,276,418,273,422,267'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="02 - Aisne" shape='polygon' coords='342,67,346,69,347,74,345,77,346,80,342,87,340,87,340,100,339,103,334,101,327,105,326,107,328,114,323,117,325,119,324,121,326,123,319,132,311,126,307,122,308,120,306,118,304,117,306,115,305,113,303,112,300,113,300,111,303,111,300,106,302,105,304,100,307,99,305,97,306,93,305,84,303,77,307,70,307,66,319,66,321,64,323,65,328,64,342,67'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="03 - Allier" shape='polygon' coords='327,251,333,263,340,266,342,269,341,274,338,278,334,279,334,282,335,293,330,297,327,293,321,293,320,290,307,289,306,287,303,288,299,284,300,281,298,280,288,287,286,286,282,278,276,274,274,270,277,264,285,264,287,261,286,257,288,255,296,252,300,248,304,249,309,254,314,255,317,253,321,256,327,251'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="04 - Alpes de Haute Provence" shape='polygon' coords='462,364,461,370,459,372,463,377,461,381,456,388,454,392,458,400,464,408,459,407,455,411,456,413,453,414,444,415,443,418,438,415,428,422,424,418,422,420,417,419,411,414,408,413,409,411,406,406,407,403,405,398,409,393,412,393,413,392,418,391,421,393,418,388,422,389,423,381,428,377,431,377,434,381,435,378,438,373,449,377,457,367,462,364'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="05 - Hautes Alpes" shape='polygon' coords='448,339,451,344,453,345,454,351,459,353,464,353,467,363,464,362,462,365,457,367,449,377,438,374,435,378,434,381,431,377,428,378,423,381,422,389,419,388,421,393,418,392,413,393,413,389,404,384,402,380,405,376,409,377,411,376,408,373,411,367,416,367,416,364,417,361,422,360,423,357,435,353,437,355,438,349,434,346,432,342,434,339,441,342,443,340,448,339'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="06 - Alpes Maritimes" shape='polygon' coords='461,381,467,388,473,389,481,393,492,389,496,395,494,399,488,407,488,413,475,421,473,425,468,427,466,431,464,427,465,425,459,422,458,417,453,414,455,413,454,410,459,406,464,407,457,400,453,393,455,388,461,381'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="07 - Ardèche" shape='polygon' coords='375,332,375,342,379,352,378,358,374,362,375,368,372,374,371,387,370,390,365,388,363,387,360,389,360,387,354,391,346,386,344,381,340,373,338,364,344,358,349,356,353,351,355,350,355,348,358,346,359,341,361,342,361,340,362,336,365,335,368,331,373,328,375,332'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="08 - Ardennes" shape='polygon' coords='346,69,349,68,354,70,362,66,363,60,367,56,369,58,367,63,367,67,370,72,369,77,374,77,380,83,386,84,386,87,388,87,385,90,380,89,378,90,379,99,376,103,377,106,373,109,355,107,345,101,340,100,340,87,342,87,347,80,345,77,347,74,346,69'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="09 - Ariège" shape='polygon' coords='250,448,252,453,260,457,262,461,262,465,260,467,262,469,261,472,258,472,259,477,261,477,265,478,269,483,262,483,261,486,253,488,244,483,241,483,240,486,234,479,228,479,224,475,215,473,214,471,217,465,220,464,220,459,223,455,226,454,232,458,231,453,236,451,234,447,236,446,239,451,242,450,243,448,248,450,250,448'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="10 - Aube" shape='polygon' coords='364,149,364,152,366,157,371,160,372,169,372,171,366,174,366,178,363,178,359,181,353,182,351,184,348,183,336,184,332,174,329,170,327,172,325,165,321,160,317,158,317,150,319,150,322,145,325,149,333,150,334,147,342,140,348,139,351,140,351,145,354,147,359,149,361,148,364,149'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="11 - Aude" shape='polygon' coords='314,451,311,454,306,464,306,473,298,469,291,473,278,473,276,474,277,480,269,483,265,478,262,479,259,477,258,472,261,471,262,469,259,466,261,464,261,461,260,458,252,453,249,448,257,439,259,441,263,440,264,439,265,441,271,441,271,439,274,438,286,439,285,442,289,447,291,445,292,448,295,447,298,443,300,445,312,449,314,451'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="12 - Aveyron" shape='polygon' coords='302,370,307,375,309,383,309,391,310,393,318,397,317,401,315,402,322,405,318,410,318,411,315,413,312,417,307,417,306,424,301,424,300,422,290,421,286,416,282,405,277,401,268,396,262,398,258,395,260,393,257,390,258,388,257,379,264,374,268,374,271,372,276,369,282,370,285,366,288,357,292,353,298,358,299,361,301,363,300,366,302,370'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="13 - Bouches du Rhône" shape='polygon' coords='415,451,412,451,403,449,400,441,387,443,383,437,381,437,380,439,381,442,373,443,369,442,370,440,368,437,355,437,358,431,363,429,363,427,366,423,369,423,370,414,375,409,384,412,389,417,394,419,397,419,408,423,411,423,417,419,419,423,416,424,414,429,419,437,416,438,415,440,417,445,415,447,415,451'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="14 - Calvados" shape='polygon' coords='201,99,201,107,204,106,202,109,204,117,203,120,205,124,204,126,199,125,193,126,186,131,184,131,178,130,176,132,171,129,165,131,163,130,162,133,157,135,149,134,147,131,151,126,149,124,157,120,155,112,157,110,149,107,148,101,153,99,162,102,174,103,181,106,190,104,195,100,201,99'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="15 - Cantal" shape='polygon' coords='307,330,307,334,312,335,315,343,317,344,315,345,318,352,311,358,309,356,302,370,300,366,300,363,298,362,297,358,292,354,288,358,286,366,282,371,276,369,271,372,268,368,269,362,266,357,265,352,268,350,267,346,270,346,270,342,272,341,270,339,277,330,278,327,284,328,283,323,290,326,292,328,298,328,303,333,307,330'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="16 - Charente" shape='polygon' coords='217,286,217,291,221,294,220,297,218,298,214,305,212,306,209,309,204,315,202,320,194,325,194,330,189,336,185,336,183,338,177,332,172,331,173,329,171,327,173,325,172,323,173,320,171,319,171,316,166,313,169,311,166,305,173,303,175,304,178,304,180,294,183,293,183,290,188,288,191,288,192,287,201,290,203,289,202,287,204,285,208,289,211,288,213,285,217,286'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="17 - Charente Maritime" shape='polygon' coords='140,273,148,270,147,273,153,273,155,274,156,277,161,284,177,290,180,294,178,305,175,305,173,303,166,306,168,311,167,313,171,316,171,319,174,321,172,322,173,325,171,327,173,329,172,331,177,332,183,338,183,339,181,343,173,342,167,338,166,333,160,331,160,329,154,329,153,323,143,313,136,308,135,304,139,301,142,296,140,291,143,290,139,283,136,282,140,273'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="18 - Cher" shape='polygon' coords='297,208,299,214,297,219,300,221,303,228,303,233,305,235,305,240,303,249,299,249,295,252,288,255,286,256,287,261,286,264,278,265,274,270,270,270,271,267,270,258,266,251,267,249,265,247,268,242,265,231,255,230,257,225,260,225,261,222,269,220,268,215,273,211,268,204,273,202,285,205,289,209,297,208'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="19 - Corrèze" shape='polygon' coords='283,309,284,314,282,316,283,324,284,329,278,327,278,330,271,338,272,341,270,343,270,346,267,347,268,350,265,352,259,352,254,354,248,348,241,349,237,343,234,342,234,339,232,338,234,336,232,334,235,329,233,325,234,322,237,323,241,319,247,318,251,314,259,310,266,307,276,312,278,309,280,310,283,309'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="21 - Côte d'Or" shape='polygon' coords='393,200,395,199,397,202,397,205,393,208,396,210,399,218,398,219,396,226,390,233,389,236,375,237,368,241,362,235,358,234,356,231,351,230,349,227,349,224,346,223,345,217,343,215,344,207,351,198,349,196,351,194,352,190,349,187,351,184,353,182,359,181,363,178,367,178,370,179,370,181,373,182,372,185,375,185,377,187,378,190,375,192,377,196,386,198,388,200,388,202,393,200'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="22 - Côtes d'Armor" shape='polygon' coords='52,135,54,134,55,128,59,125,60,127,68,124,69,127,73,125,72,130,74,128,76,127,76,130,78,131,82,138,82,141,86,143,86,146,97,139,100,138,101,140,104,139,104,142,109,141,109,144,112,144,115,146,115,151,114,159,104,162,101,168,99,169,97,166,93,165,88,172,86,167,84,168,72,162,65,165,54,161,55,158,53,149,55,142,52,138,52,135'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="23 - Creuse" shape='polygon' coords='274,270,275,273,282,278,286,286,285,290,287,296,279,304,283,309,280,311,278,310,276,312,266,308,259,311,259,305,254,303,248,302,248,300,246,298,247,295,245,290,239,281,241,276,240,274,243,271,253,270,255,268,267,271,270,270,274,270'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="24 - Dordogne" shape='polygon' coords='233,325,236,329,233,334,234,336,232,338,235,339,235,342,238,342,241,349,240,354,239,359,235,362,235,365,230,368,225,374,222,370,217,373,215,367,210,368,208,367,205,368,197,369,194,363,193,362,194,359,192,357,190,360,181,357,183,355,183,350,185,345,185,343,181,343,183,338,185,336,190,335,193,331,194,325,202,319,203,315,209,309,215,312,215,316,223,315,230,320,228,323,233,325'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="25 - Doubs" shape='polygon' coords='453,207,452,210,456,213,454,215,454,218,443,231,435,237,436,246,425,256,425,258,422,255,425,249,427,247,423,243,420,242,415,233,412,234,411,232,409,234,408,231,411,227,406,219,427,210,429,206,434,204,437,205,439,203,442,202,442,200,448,200,453,203,452,205,453,207'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="26 - Drôme" shape='polygon' coords='416,364,416,367,411,367,409,373,411,376,409,378,405,377,402,381,404,384,413,389,413,393,409,394,406,398,400,396,401,393,392,392,392,387,389,389,387,388,387,388,385,387,387,383,383,381,381,383,380,386,382,387,385,387,387,388,379,391,376,388,370,387,372,374,375,368,373,362,377,358,379,352,375,342,375,332,383,329,388,331,391,339,390,344,392,343,400,345,403,344,404,360,406,359,411,363,416,364'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="27 - Eure" shape='polygon' coords='253,100,257,108,253,111,249,119,246,119,244,121,245,127,240,133,240,136,235,137,232,135,227,138,222,139,219,142,216,140,218,138,211,129,205,129,205,126,205,124,203,120,204,117,202,109,204,107,201,106,201,98,208,96,216,100,218,99,223,102,221,104,223,106,228,108,229,106,237,104,241,97,253,100'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="28 - Eure et Loir" shape='polygon' coords='245,127,249,133,249,143,255,148,256,153,258,155,261,155,263,164,259,176,251,176,245,179,245,181,242,180,237,183,226,173,220,174,220,172,218,169,217,162,224,157,224,153,224,149,220,145,219,142,222,139,227,138,232,136,235,137,240,136,240,133,245,127'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="29 - Finistère" shape='polygon' coords='52,135,52,138,55,142,53,149,55,158,53,161,47,165,48,168,51,173,58,174,58,179,56,181,53,181,53,183,56,189,54,188,53,181,53,183,50,185,47,184,47,182,45,182,42,183,38,178,34,179,31,178,28,182,21,181,22,176,18,170,10,167,11,165,22,164,25,165,26,163,25,160,20,157,18,157,16,159,14,154,15,151,17,153,22,154,26,153,27,156,33,157,27,154,29,154,27,152,27,150,22,151,22,148,25,147,14,150,12,149,10,150,8,148,9,140,11,137,18,138,16,137,26,132,27,134,40,130,40,136,42,133,44,136,44,133,47,132,52,135'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="2A - Corse du Sud" shape='polygon' coords='476,526,476,533,475,538,473,540,475,540,470,554,467,553,466,550,456,547,451,543,451,540,456,537,447,535,450,529,449,524,442,526,444,519,447,516,440,513,439,508,444,504,440,500,438,501,438,498,451,500,452,504,457,507,463,513,464,516,466,517,470,527,473,527,476,526'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="2B - Haute Corse" shape='polygon' coords='476,526,473,527,470,527,466,517,463,515,463,513,457,507,452,504,451,501,438,499,442,494,441,491,444,488,446,488,447,485,457,481,460,477,468,478,468,462,470,460,473,461,474,470,474,479,478,485,481,509,476,520,476,526'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="30 - Gard" shape='polygon' coords='370,390,373,394,373,400,379,405,375,410,371,414,370,423,367,423,363,427,363,430,358,431,355,437,352,436,348,432,352,427,351,424,346,418,343,418,343,415,337,414,337,411,336,409,332,409,329,413,328,415,323,413,321,414,321,412,318,412,318,410,322,406,314,402,317,400,318,397,326,400,329,400,330,396,338,398,343,397,342,394,343,392,339,385,343,382,344,380,347,386,353,390,360,386,361,389,362,387,365,387,370,390'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="31 - Haute Garonne" shape='polygon' coords='264,439,263,440,258,441,257,439,249,448,248,450,243,448,242,451,239,451,236,446,234,447,236,452,231,453,232,458,226,455,223,456,220,459,220,465,218,465,214,471,215,473,208,471,206,472,207,478,205,480,199,480,198,472,203,469,206,465,205,463,202,463,202,459,198,456,205,445,208,444,211,439,221,442,222,436,228,431,219,418,229,417,230,419,235,418,234,415,245,411,246,417,248,418,248,421,251,423,250,428,263,436,264,439'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="32 - Gers" shape='polygon' coords='212,403,216,404,213,409,218,412,220,419,228,431,222,437,221,442,211,440,208,445,205,446,193,443,192,441,187,441,185,433,182,432,180,429,176,429,170,429,169,427,172,416,172,410,181,407,181,411,183,409,184,407,187,407,189,404,196,405,201,402,209,403,212,403'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="33 - Gironde" shape='polygon' coords='155,330,160,329,160,331,166,333,167,339,173,342,181,343,185,343,186,345,183,350,183,355,181,357,190,359,192,357,194,359,193,361,194,363,191,363,190,365,188,364,187,367,189,369,181,376,181,385,178,387,179,389,175,393,174,391,172,394,166,393,166,389,155,382,156,380,140,380,141,375,138,374,131,377,131,373,134,367,139,367,139,365,135,360,132,367,137,321,140,316,141,319,151,328,153,335,155,332,155,330'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="34 - Hérault" shape='polygon' coords='349,431,341,434,331,441,325,448,319,448,314,451,312,449,300,445,298,443,295,447,292,448,291,446,289,447,285,442,286,439,289,437,290,435,289,426,295,428,301,424,306,424,306,416,312,417,315,412,318,411,321,411,322,414,323,412,328,415,328,412,332,409,336,408,338,411,337,413,343,415,343,416,346,417,351,423,353,427,349,431'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="35 - Ille et Vilaine" shape='polygon' coords='115,145,113,141,116,137,119,137,119,141,130,141,134,150,137,151,143,147,148,149,148,160,147,162,148,178,143,180,140,188,140,190,133,187,125,190,124,193,112,193,107,196,106,191,108,190,106,189,108,187,109,184,107,183,108,180,107,178,103,176,102,173,105,172,102,171,101,168,106,161,114,159,115,151,115,145'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="36 - Indre" shape='polygon' coords='257,225,255,229,266,231,267,242,265,247,267,249,266,251,270,258,271,267,270,270,267,271,255,268,253,270,243,271,240,274,239,272,233,272,231,272,232,269,230,268,228,263,225,263,221,259,221,254,220,251,225,250,224,248,226,237,232,235,234,236,236,233,238,231,238,226,243,223,245,224,247,222,252,221,257,225'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="37 - Indre et Loire" shape='polygon' coords='211,197,220,198,220,203,222,201,228,204,227,206,230,211,229,219,231,221,234,220,238,226,238,231,236,233,234,236,231,234,227,237,224,248,225,250,219,251,213,242,213,239,208,236,209,238,200,239,198,238,196,232,193,232,193,229,188,227,194,212,195,204,196,202,201,204,201,201,203,201,211,197'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="38 - Isère" shape='polygon' coords='434,339,432,343,433,347,438,350,438,354,434,353,423,358,422,360,418,361,415,364,411,363,406,360,403,360,403,344,399,345,392,343,390,344,391,339,388,331,383,329,375,332,373,328,373,323,377,319,375,317,378,314,384,313,386,309,386,302,391,304,394,299,397,299,407,312,413,322,418,322,419,320,428,322,430,328,428,333,429,338,434,339'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="39 - Jura" shape='polygon' coords='406,219,411,227,408,231,409,233,411,232,412,234,415,233,421,242,423,243,427,247,425,249,422,256,425,258,422,267,417,273,413,276,409,276,409,273,406,272,402,276,400,276,399,273,397,273,393,266,395,265,395,260,397,256,395,248,393,246,398,243,390,239,389,236,390,232,396,226,398,218,399,217,401,219,406,219'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="40 - Landes" shape='polygon' coords='131,377,138,374,142,375,140,380,156,380,155,382,166,389,166,393,172,393,174,390,176,393,176,397,187,399,183,404,184,407,184,409,182,410,181,408,172,410,172,416,169,426,170,429,162,430,159,429,155,431,153,429,150,431,148,428,139,430,138,432,136,431,133,432,132,430,122,432,117,430,121,423,131,377'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="41 - Loir et Cher" shape='polygon' coords='245,181,248,188,246,191,248,196,251,195,253,196,254,199,256,200,258,198,272,200,273,202,268,204,273,211,268,215,269,220,261,222,260,225,257,224,253,221,247,222,245,224,243,223,238,226,234,220,231,221,229,220,230,211,227,207,227,204,222,201,220,203,220,198,211,197,211,194,214,193,220,183,220,178,218,176,220,174,225,173,237,183,243,179,245,181'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="42 - Loire" shape='polygon' coords='357,280,359,283,355,286,353,294,358,301,356,306,358,307,357,310,358,312,362,316,368,318,369,321,373,323,373,328,368,331,365,335,362,336,360,334,358,335,357,330,352,328,346,330,343,331,341,329,339,329,342,323,339,316,335,313,331,305,332,300,330,297,335,293,334,281,334,279,338,278,338,280,343,283,350,282,352,284,357,280'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="43 - Haute Loire" shape='polygon' coords='362,336,362,340,362,343,359,342,358,346,356,348,356,351,353,352,350,357,345,359,338,364,330,358,327,357,327,360,321,358,320,354,317,352,314,345,316,344,315,343,312,335,307,334,307,330,316,327,324,327,328,330,339,329,341,329,343,330,346,330,352,327,357,330,358,334,360,334,362,336'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="44 - Loire Atlantique" shape='polygon' coords='140,190,146,202,144,202,142,204,150,207,150,213,137,215,134,216,137,217,141,222,141,224,139,228,141,230,141,232,137,229,136,231,133,232,133,235,131,237,129,235,129,233,126,233,125,241,115,237,109,231,105,226,100,224,102,223,103,217,109,215,102,215,98,218,96,217,90,216,88,210,92,206,106,202,107,196,112,193,124,193,125,190,133,187,140,190'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="45 - Loiret" shape='polygon' coords='279,162,280,165,283,169,283,172,281,173,289,174,299,171,305,178,306,183,302,188,302,191,301,193,296,196,299,199,301,205,298,205,297,208,289,209,285,205,273,202,272,199,258,198,256,200,254,200,253,196,250,195,248,196,246,191,248,188,245,181,245,179,251,176,259,175,263,164,270,164,272,161,273,163,276,162,279,162'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="46 - Lot" shape='polygon' coords='265,351,267,357,270,362,269,367,271,372,270,374,264,375,257,380,258,388,252,389,246,394,243,392,235,394,234,390,232,392,230,391,226,387,227,385,225,385,222,376,225,374,230,367,235,364,234,362,239,358,240,353,241,349,248,348,254,353,259,351,265,351'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="47 - Lot-et-Garonne" shape='polygon' coords='225,374,223,377,225,385,218,387,218,390,220,391,216,396,217,399,215,398,212,403,209,404,201,403,197,406,189,405,187,407,184,407,183,404,186,400,176,397,175,392,179,389,178,387,181,384,182,376,189,368,187,367,188,363,190,365,192,361,194,363,197,368,205,368,208,366,210,367,215,367,217,372,222,370,225,374'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="48 - Lozère" shape='polygon' coords='338,364,340,373,344,380,343,382,340,385,343,392,342,395,344,397,337,399,330,397,330,400,326,400,318,397,310,393,308,391,309,383,306,375,302,371,309,355,310,358,318,352,320,353,321,358,327,359,327,357,330,357,338,364'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="49 - Maine et Loire" shape='polygon' coords='173,192,173,195,179,195,179,198,181,200,184,199,189,202,196,202,195,205,194,212,188,227,182,232,180,230,171,230,166,231,163,235,152,236,142,232,141,230,139,228,141,224,141,222,137,217,135,216,137,214,150,212,150,207,142,204,144,202,146,202,139,190,140,188,150,191,152,189,160,193,163,193,168,191,173,192'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="50 - Manche" shape='polygon' coords='148,101,149,107,157,110,155,112,157,120,150,124,151,127,147,131,148,134,157,135,161,140,159,146,156,150,148,149,143,147,137,151,134,150,130,142,136,141,137,138,135,139,133,138,129,130,131,125,131,119,130,116,131,107,123,99,121,89,122,87,122,83,119,81,119,79,129,83,135,82,138,81,144,81,145,84,143,91,148,101'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="51 - Marne" shape='polygon' coords='373,109,376,117,375,121,377,122,377,126,373,127,373,132,376,136,376,140,368,142,370,144,368,146,369,149,364,149,361,148,359,149,354,147,351,146,351,140,348,139,342,140,333,147,333,150,325,149,322,145,320,144,317,136,319,134,319,132,326,123,324,121,325,119,323,117,328,114,326,107,327,105,334,101,339,103,340,100,346,101,355,107,374,109'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="52 - Haute Marne" shape='polygon' coords='395,154,392,156,404,165,403,173,408,178,408,180,410,179,412,182,412,183,410,186,407,186,405,188,405,195,402,196,400,195,394,198,393,200,388,202,389,200,386,198,377,196,375,192,377,190,377,187,375,185,372,185,373,182,370,181,370,178,366,178,366,174,371,171,372,169,371,160,366,157,364,152,365,149,369,149,368,146,370,144,368,142,376,140,379,145,395,154'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="53 - Mayenne" shape='polygon' coords='156,150,159,153,162,151,164,153,170,150,178,150,179,148,181,148,183,153,186,155,186,157,182,160,182,166,178,170,180,173,175,177,176,180,171,187,172,192,168,191,163,193,159,193,152,189,150,191,140,188,144,180,149,178,147,162,148,160,148,149,156,150'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="54 - Meurthe et Moselle" shape='polygon' coords='408,93,410,102,412,103,414,106,412,109,413,114,410,114,414,121,425,125,425,128,427,131,435,134,440,137,453,142,455,145,456,146,455,146,446,153,440,152,438,150,434,153,428,154,426,152,421,154,420,157,415,157,411,153,411,150,406,150,406,147,404,145,405,142,404,135,407,119,402,109,403,103,402,101,398,97,393,98,392,93,397,93,398,90,405,90,408,93'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="55 - Meuse" shape='polygon' coords='392,94,393,98,398,96,402,101,403,103,402,109,407,120,406,123,404,135,405,143,403,145,405,147,406,150,404,152,401,151,395,154,379,145,376,140,376,136,373,132,374,127,376,126,377,122,375,121,375,117,374,109,377,105,376,103,379,98,378,90,380,88,385,90,387,88,389,87,392,94'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="56 - Morbihan" shape='polygon' coords='101,168,102,172,105,172,102,173,102,175,107,178,108,180,107,183,109,184,108,187,106,189,108,191,106,191,107,196,106,202,92,206,91,204,93,204,91,202,80,203,76,200,81,200,83,198,81,196,78,195,76,197,73,193,75,199,72,197,69,198,67,200,68,203,66,200,67,197,65,194,64,192,61,190,59,188,61,186,59,185,58,183,59,188,56,189,54,188,53,181,56,182,58,179,58,174,50,173,47,168,47,165,53,162,65,165,72,162,84,168,87,167,88,172,94,166,97,166,99,169,101,168'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="57 - Moselle" shape='polygon' coords='473,114,472,118,471,120,463,121,455,117,454,114,449,124,454,126,453,128,455,130,456,128,459,128,463,131,460,143,458,145,455,145,453,142,439,137,435,134,427,132,425,128,425,125,414,121,410,115,413,114,412,109,414,106,412,103,410,102,408,93,413,95,415,95,419,92,429,94,432,96,434,101,441,110,443,110,444,108,446,106,449,108,451,111,454,110,460,111,465,107,473,114'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="58 - Nièvre" shape='polygon' coords='345,217,346,223,349,224,349,227,345,228,345,229,343,230,343,235,341,237,344,244,343,245,344,248,333,254,327,251,321,256,317,253,315,255,309,254,303,249,305,240,305,235,303,233,303,228,300,221,297,219,299,214,297,208,298,206,301,205,304,205,311,209,317,209,321,205,324,210,329,213,335,212,336,216,338,215,339,217,345,217'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="59 - Nord" shape='polygon' coords='267,10,282,7,285,8,287,14,286,19,287,21,290,21,293,26,295,27,301,24,306,23,310,28,309,30,312,38,315,39,318,37,319,40,324,41,326,49,328,47,332,48,338,47,342,52,344,51,343,57,345,62,343,67,328,63,323,65,321,64,319,66,307,66,304,64,307,54,306,52,303,52,303,49,300,44,303,43,299,38,294,37,295,31,294,29,292,31,281,30,278,27,278,24,273,22,267,10'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="60 - Oise" shape='polygon' coords='305,84,306,93,305,97,307,99,304,100,302,105,300,107,302,111,300,111,301,113,303,112,305,113,306,115,304,117,296,120,294,118,292,120,286,119,276,113,274,115,265,113,260,115,254,114,253,111,257,108,253,100,255,93,253,85,256,81,260,84,263,83,276,85,288,91,296,85,305,84'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="61 - Orne" shape='polygon' coords='205,126,205,129,210,129,218,138,216,140,219,142,219,145,224,149,224,153,224,157,217,162,218,169,215,168,212,165,210,166,203,161,202,154,199,152,189,157,186,157,186,155,183,153,181,148,179,148,178,150,170,150,164,153,161,152,159,153,156,150,160,146,161,139,157,135,162,133,163,130,166,131,171,129,176,132,179,131,184,131,187,131,193,126,200,125,205,126'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="62 - Pas de Calais" shape='polygon' coords='251,47,249,46,249,43,249,37,252,38,249,35,249,19,254,14,267,10,273,22,278,24,278,27,282,30,292,31,294,30,295,32,294,37,299,38,303,43,300,45,303,49,303,52,306,52,307,54,304,64,296,65,295,63,293,64,291,60,290,62,282,59,280,62,278,59,280,54,270,56,263,51,262,48,251,47'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="63 - Puy de Dôme" shape='polygon' coords='330,297,332,300,331,306,335,313,339,316,342,323,339,329,329,330,324,327,316,327,307,330,304,334,297,329,291,329,290,326,283,324,282,316,284,313,283,309,278,304,286,296,285,290,285,286,288,287,298,279,300,281,299,284,303,288,306,287,308,289,320,290,321,293,327,293,330,297'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="64 - Pyrénées-Atlantiques" shape='polygon' coords='117,430,122,431,132,429,133,432,136,431,138,432,139,430,149,429,151,431,153,429,155,431,159,429,162,430,170,429,176,429,179,435,177,437,180,437,180,444,178,445,179,448,171,456,171,459,169,460,167,462,166,470,160,473,158,472,156,473,149,467,146,463,141,463,132,460,126,457,126,454,123,455,123,458,120,457,118,455,121,452,122,447,121,445,115,443,113,445,112,442,107,440,113,436,117,430'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="65 - Hautes Pyrénées" shape='polygon' coords='205,445,199,456,203,459,202,462,205,462,206,465,203,470,198,473,199,480,190,480,188,478,176,480,166,470,166,462,168,459,171,459,171,456,178,448,178,445,180,444,180,437,177,437,178,434,176,429,180,428,182,432,185,433,187,441,192,440,194,443,205,445'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="66 - Pyrénées Orientales" shape='polygon' coords='306,472,306,489,311,495,304,493,298,495,290,498,290,501,285,502,280,498,272,496,269,497,265,500,262,500,259,495,252,492,253,487,261,485,262,482,269,482,277,479,276,474,278,472,291,473,298,468,306,472'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="67 - Bas-Rhin" shape='polygon' coords='474,114,487,115,495,118,491,127,482,140,480,155,475,167,471,165,471,163,463,157,460,157,455,155,456,146,455,145,458,145,460,143,463,131,459,128,456,128,455,130,453,128,454,126,449,124,454,114,454,117,463,121,471,120,472,118,474,114'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="68 - Haut-Rhin" shape='polygon' coords='475,167,477,177,474,191,476,198,475,200,475,203,472,203,472,206,469,206,462,206,463,204,460,203,458,198,456,198,455,190,448,185,451,183,450,178,455,170,459,158,460,157,463,157,471,163,471,165,475,167'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="69 - Rhône" shape='polygon' coords='373,282,371,290,374,298,377,298,380,302,386,302,386,309,384,314,378,315,375,317,377,320,373,323,369,321,368,318,362,316,358,312,357,309,358,307,356,306,358,300,353,293,355,286,359,283,357,280,357,278,360,276,362,277,363,276,366,277,367,275,373,282'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="70 - Haute Saône" shape='polygon' coords='447,186,445,191,448,200,442,200,442,202,439,203,437,205,435,204,429,206,427,210,406,219,401,219,399,217,395,210,393,209,397,205,397,202,395,199,393,201,394,198,400,195,402,196,405,196,405,188,407,186,410,186,412,183,411,182,419,176,425,180,431,179,435,182,440,180,447,186'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="71 - Saône et Loire" shape='polygon' coords='390,236,390,239,398,243,393,246,395,248,397,256,395,261,395,265,393,266,388,263,384,264,378,263,373,282,367,275,366,277,364,276,362,277,360,276,358,278,357,280,352,284,350,282,343,283,338,280,338,278,341,273,342,268,340,266,333,263,327,251,334,254,344,248,343,245,345,243,341,237,343,236,343,230,345,229,345,228,348,228,349,228,351,230,356,232,357,234,362,236,368,241,375,237,390,236'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="72 - Sarthe" shape='polygon' coords='218,169,220,172,219,174,218,176,220,178,220,183,214,193,211,194,211,197,204,201,201,201,201,204,196,202,189,202,184,199,181,199,179,198,179,195,173,195,173,192,171,187,176,180,175,177,180,173,178,170,182,166,182,160,186,158,189,157,199,152,201,154,203,161,210,166,212,165,215,168,218,169'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="73 - Savoie" shape='polygon' coords='453,301,453,304,456,307,461,309,461,312,463,317,469,322,467,326,468,329,466,332,448,340,443,341,441,342,434,339,429,338,428,333,430,328,428,322,419,320,419,322,413,322,407,313,412,307,414,294,417,300,419,301,420,303,423,305,425,303,429,303,433,307,441,295,444,296,443,298,446,301,451,302,453,301'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="74 - Haute Savoie" shape='polygon' coords='419,283,425,282,431,277,429,274,432,269,435,270,440,266,447,266,451,267,450,269,453,274,451,280,459,287,462,291,461,294,453,301,451,303,445,301,443,299,444,296,441,295,433,307,429,304,426,303,424,305,421,304,420,301,417,300,414,294,414,286,416,286,419,283'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="75 - Paris" shape='polygon' coords='436,29,443,29,445,30,450,35,451,40,450,45,454,46,455,47,458,47,458,51,457,52,455,49,452,49,451,49,450,50,445,50,445,51,437,51,436,50,432,46,429,44,428,43,426,42,424,43,422,41,422,39,424,37,424,36,429,36,432,33,433,33,435,31,436,29'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="76 - Seine Maritime" shape='polygon' coords='241,63,253,73,256,81,254,85,255,94,253,100,242,98,237,104,230,106,228,109,223,106,221,105,223,102,218,100,215,100,208,96,202,98,195,96,193,94,198,82,211,75,231,70,241,63'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="77 - Seine et Marne" shape='polygon' coords='304,117,306,118,308,120,307,122,309,125,311,126,319,132,319,134,317,136,320,143,322,145,319,150,317,150,317,158,303,161,303,166,299,171,289,174,281,173,283,172,283,169,280,165,279,162,282,158,286,142,285,141,286,138,286,135,285,130,286,128,285,123,286,121,286,119,292,120,294,118,296,120,304,117'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="78 - Yvelines" shape='polygon' coords='271,129,270,132,272,137,266,142,264,144,265,147,261,155,258,155,256,153,255,148,249,143,249,133,245,127,244,122,246,119,249,119,258,120,267,123,271,129'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="79 - Deux Sèvres" shape='polygon' coords='182,232,185,240,185,243,187,244,183,257,185,256,187,259,183,264,184,270,186,271,186,274,192,274,189,282,193,285,192,287,191,288,188,287,183,290,183,293,180,294,177,290,161,284,155,278,155,274,163,270,161,268,162,262,157,245,154,241,152,236,163,235,166,231,171,230,180,230,182,232'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="80 - Somme" shape='polygon' coords='251,47,262,48,263,51,269,56,280,54,278,59,280,62,281,59,290,63,291,60,293,64,296,63,296,65,304,64,307,66,303,77,304,83,296,85,288,91,276,85,263,83,260,84,256,81,253,73,241,63,247,56, 250,56, 247,51, 247,49, 251,47'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="81 - Tarn" shape='polygon' coords='301,424,295,428,289,427,290,435,289,438,286,440,275,439,272,439,271,442,265,441,264,439,263,437,250,428,250,423,248,421,248,419,246,417,244,412,245,408,249,405,250,404,248,402,251,400,254,401,262,398,268,395,277,400,282,405,286,416,290,420,300,421,301,424'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="82 - Tarn et Garonne" shape='polygon' coords='258,387,258,391,260,393,258,395,262,398,254,402,252,401,249,402,250,403,249,406,245,409,245,412,234,416,236,418,231,420,228,418,220,419,218,412,213,409,216,404,211,403,215,398,217,398,216,396,219,391,218,390,218,387,225,385,228,385,226,387,230,390,232,391,235,390,235,393,243,391,245,393,252,388,258,387'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="83 - Var" shape='polygon' coords='466,431,464,434,459,435,454,442,457,444,455,449,451,448,449,451,444,452,443,454,437,453,435,458,434,456,428,454,420,457,420,454,415,451,415,447,417,446,415,440,416,437,418,437,414,429,415,424,418,423,417,419,422,419,424,417,428,422,437,414,443,417,444,414,453,414,458,417,460,422,465,424,464,426,466,431'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="84 - Vaucluse" shape='polygon' coords='406,398,408,403,406,406,410,411,408,413,412,414,417,420,411,424,408,424,397,420,394,420,389,418,384,413,375,410,379,405,373,400,373,395,370,390,370,386,376,387,379,391,386,387,389,389,392,387,392,392,401,393,401,396,406,398'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="85 - Vendée" shape='polygon' coords='109,231,115,237,125,241,126,233,129,232,129,235,130,237,133,235,133,232,136,232,137,229,141,232,151,236,153,241,157,245,162,261,161,268,163,270,156,274,153,273,147,273,148,270,140,273,138,273,137,275,133,272,127,271,126,268,121,267,114,260,112,254,102,242,102,239,109,231'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="86 - Vienne" shape='polygon' coords='188,226,193,230,193,232,196,232,198,238,200,239,209,239,208,236,213,239,213,241,220,251,222,254,221,259,225,263,228,263,230,268,233,269,231,272,230,271,229,274,226,273,225,275,220,278,217,283,217,286,213,285,211,288,208,289,204,285,202,287,203,289,201,290,192,287,193,284,189,282,192,274,186,274,186,271,184,270,184,264,187,259,185,256,182,257,187,244,184,243,185,240,182,232,188,226'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="87 - Haute Vienne" shape='polygon' coords='240,274,241,276,239,281,244,290,247,295,246,298,248,299,248,302,254,302,259,305,259,311,251,314,247,319,241,320,237,323,235,323,233,325,228,323,230,320,223,315,215,316,214,312,209,309,212,305,214,305,218,297,220,297,221,294,217,291,217,283,219,278,225,275,226,273,229,274,230,272,233,273,239,272,240,274'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="88 - Vosges" shape='polygon' coords='456,146,455,155,460,157,459,158,455,171,450,178,451,183,447,186,440,180,435,182,430,179,426,180,419,177,412,182,410,179,408,180,407,178,402,173,404,166,393,157,395,154,401,151,404,152,406,150,411,150,411,153,415,157,420,156,421,154,425,152,428,154,434,153,438,150,440,152,445,153,455,146,456,146'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="89 - Yonne" shape='polygon' coords='317,158,321,160,325,165,327,172,329,170,332,174,337,184,348,183,351,184,349,187,352,190,352,194,349,196,351,198,345,207,343,215,345,217,339,218,338,215,336,216,335,212,329,213,324,210,321,206,316,209,311,209,304,205,301,205,299,198,296,195,301,193,302,190,302,188,306,183,305,178,299,171,303,166,303,161,317,158'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="90 - Territoire de Belfort" shape='polygon' coords='460,203,456,203,453,207,452,205,453,203,448,200,445,191,447,186,449,186,455,190,456,198,458,198,460,203'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="91 - Essonne" shape='polygon' coords='272,136,281,140,283,139,285,141,286,142,282,158,279,162,276,162,273,163,272,161,270,164,263,164,261,155,265,146,265,144,266,141,272,136'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="92 - Hauts de Seine" shape='polygon' coords='434,19,439,20,440,22,436,27,435,31,429,36,424,36,422,39,422,41,424,43,428,43,428,44,433,46,436,50,438,51,441,51,439,53,439,56,439,63,439,68,436,70,436,73,435,73,434,70,429,70,429,69,430,66,429,64,419,58,410,51,409,48,409,43,407,41,407,38,416,37,416,31,418,30,433,21,434,19'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="93 - Seine Saint denis" shape='polygon' coords='434,19,431,18,431,15,441,14,442,17,444,17,446,15,449,15,454,19,462,18,469,11,470,11,473,8,478,9,478,12,477,13,478,17,480,20,480,21,482,26,480,27,478,31,477,37,479,39,479,42,479,44,478,52,468,42,464,39,461,42,451,36,450,34,444,29,436,29,436,27,440,22,438,19,434,19'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="94 - Val de Marne" shape='polygon' coords='479,52,482,58,482,60,484,64,483,66,481,66,480,69,480,72,481,73,481,75,478,78,476,80,474,80,468,74,466,71,460,71,458,74,453,74,445,71,444,68,439,68,439,64,439,54,441,51,445,52,446,50,450,50,451,49,455,49,458,52,458,47,455,47,450,44,451,37,460,43,465,40,471,45,479,52'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="95 - Val d'Oise" shape='polygon' coords='286,120,286,121,284,123,280,126,278,125,275,127,271,129,266,123,258,120,249,119,253,111,254,114,259,115,265,113,274,115,276,113,286,120'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="971 - Guadeloupe" shape='polygon' coords='447,23,451,27,453,31,453,37,455,40,462,41,468,45,472,49,467,50,461,49,448,53,443,52,440,49,436,50,437,56,439,58,440,70,429,76,426,76,423,70,420,65,420,56,417,49,417,43,420,37,426,38,433,42,435,47,440,46,440,42,444,41,447,38,446,35,443,33,442,29,447,23'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="972 - Martinique" shape='polygon' coords='337,34,340,32,344,33,349,30,350,33,347,35,346,37,343,35,340,37,340,39,343,40,344,43,341,45,341,48,344,48,347,47,347,48,346,50,349,52,355,62,356,68,358,68,358,74,354,81,350,84,347,80,349,76,345,76,341,74,334,72,329,72,324,75,320,67,320,63,330,63,334,61,331,59,330,55,326,56,320,55,319,52,314,51,310,45,308,34,303,31,301,26,304,20,308,18,316,18,322,22,327,23,337,34'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="973 - Guyane" shape='polygon' coords='50,19,57,20,61,24,74,25,91,42,97,42,102,49,100,54,95,59,80,84,79,89,70,92,50,92,41,93,33,90,39,88,45,81,45,72,48,65,41,55,38,47,38,35,49,18'" onmousemove="afficher('info')" onmouseout="masquer('info')">
<area href="#" title="974 - Réunion" shape='polygon' coords='226,32,225,38,229,42,233,50,236,50,238,55,236,61,234,69,235,73,219,76,200,72,196,66,190,65,183,59,186,56,183,49,179,46,179,39,185,38,185,31,191,29,194,25,205,24,210,27,215,26,218,28,222,28,226,32'" onmousemove="afficher('info')" onmouseout="masquer('info')">
 
</map>
<br />
<div id="info">
<p>Ain</p>
<p>Aisne</p>
<p>Allier</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>Test aude</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>Hérault</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<!--------------------------------------------------------------------------------------------------------------------------->
				</div>
 
				<div class="Bas"></div>
 
			</div>
		</div>
<!-- end content -->
 
		<div style="clear: both;">&nbsp;</div>
	</div>
<!-- end page --> 
</div>
<div id="Footer">
	<p> <a href="Legal.php">Legal</a></p>
    <p>&nbsp;</p>
	<p>Elena Deudero Ibiza &copy; 2011 Todos los derechos reservados</p> 
	<p>Desarrollado por <a href="http://www.informadream.fr/" title="Inform@dream">Inform@dream</a> &copy; 2011</p>
</div></body>
</html>

**Marc3001** · 07/10/2011, 17h38

T'as un " en trop après tes coordonnées.

**Marc3001** · 07/10/2011, 17h40

Tes balises area doivent être fermées soit en ajoutant la balise </area> ou en auto fermant chaque balise comme ça :

Code :

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

<area attribut="toto" />

Invité · 07/10/2011, 17h45

oui effectivement erreur corriger mais toujours le meme probleme !
Toutes les infos de chaque departement malgré le survol de chaque département avec la souris !
Avec un exemple c'est peut-être mieu ?
voir là : http://www.elenadeuderoibiza.com/boutik.php

**Marc3001** · 07/10/2011, 18h31

Ça me parait logique.

Au survol sur une zone, tu rends visible une div qui contient ce avec quoi tu l'as remplis, c'est à dire tous les départements.

Pourquoi tu n'ajoutes pas un paramètre dans ta fonction afficher qui correspondrait au département et l'ajouterait dans ta div info.

Invité · 07/10/2011, 18h34

Envoyé par Marc3001

Ça me parait logique.

Au survol sur une zone, tu rends visible une div qui contient ce avec quoi tu l'as remplis, c'est à dire tous les départements.

Pourquoi tu n'ajoutes pas un paramètre dans ta fonction afficher qui correspondrait au département et l'ajouterait dans ta div info.

Oui ça me semble logique mais là je sèche et je vois pas du tout comment faire ?

**Marc3001** · 07/10/2011, 21h49

Ta fonction javascript :

Code :

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

1
2
3
4
5
6
7
function afficher(info,dept)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
        tooltip.innerhtml = dept;
        run= true ;
}

Dans ta boucle for :

Code :

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

echo "<area href=\"#\" title=\"".$row['id_dpt']." - ".$row['titre_dpt']."\" shape='polygon' coords='".$row['area_dpt']."'\" onmousemove=\"afficher('info','".$row['titre_dpt']."')\" onmouseout=\"masquer('info')\">\n"

J'ai l'impression que tu copies/colles du code sans vraiment comprendre comment ça fonctionne. Ton cas est relativement simple, essaie de relire ton code, tu comprendras comment ça marche.

Invité · 08/10/2011, 08h37

Envoyé par Marc3001

Ta fonction javascript :

Code :

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

1
2
3
4
5
6
7
function afficher(info,dept)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
        tooltip.innerhtml = dept;
        run= true ;
}

Dans ta boucle for :

Code :

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

echo "<area href=\"#\" title=\"".$row['id_dpt']." - ".$row['titre_dpt']."\" shape='polygon' coords='".$row['area_dpt']."'\" onmousemove=\"afficher('info','".$row['titre_dpt']."')\" onmouseout=\"masquer('info')\">\n"

J'ai l'impression que tu copies/colles du code sans vraiment comprendre comment ça fonctionne. Ton cas est relativement simple, essaie de relire ton code, tu comprendras comment ça marche.

Bonjour

Ok j'ai vu ou j'ai merdé ! C'est au niveau du javascript que je n'arrive pas a comprendre j'ai vraiment du mal avec ! Il va falloir que je me mette réellement à relire les cours et tutoriels qu'il y a sur developpez. En tout cas un grand merci a toi pour t'as patience.

Je met en résolue !!

afficher les infos d'une bdd avec un area shape

PHP & Base de données

Discussions similaires

Partager

Partager