Bonjour ,
Je réalise une map interractive avec html css et jquery , dont le survol d' une certaine region en change la couleur et cela suivant un tutoriel trouvé sur le net

Le Problème est qu'au survole , rien ne change . Quelqu'un saurait de quoi il s'agit ?
voici un apperçu du code

Code html : 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
<!DOCTYPE html> 
<html lang="fr"> 
 
<head> 
	<title>DjazAnnonces</title> 
	<meta  charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
        jQuery(function(§){
        §('.djazmap').append('<div class="overlay>');
	§('.djazmap area').mouseover(function(){
		var index = §(this).index();
		var left= -index * 485 - 485;
		§('.djazmap .overlay').css({
			backgroundPosition: left+"px 0px"
			});
		});
	§('djazmap').mouseout(function(){
		§('djazmap .overlay').css({
			backgroundPosition : "173px 0px"
			});
		});
	});
	</script>
 
</head> 
 
<body>
<!--CARTE INTERRACTIVE DES REGIONS-->
	<div class="djazmap">
		<img src="img/void.png" width=485  height= 465 usemap="#djazmap">
		<map name="djazmap">
<area shape="poly" coords="105,310,108,315,108,318,109,319,112,319,116,316,128,329,138,342,149,342,151,344,151,346,158,352,177,369,181,369,183,368,186,368,189,376,210
 
////ETC pour les coordonnées
</map>
 
</div>
 
  </body>
  </html>
//code css
Code css : 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
.djazmap 
{
	width:485px;
	height:465px;
	background:url(../img/djazmap.png) left top no-repeat ;
	position:relative;
}
 
.djazmap .overlay 
{
	width:485px;
	height:465px;
	background:url(../img/djazmap.png) 485px top  no-repeat ;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
 
}
 
.djazmap img
{
	position : absolute;
	top:0;
	left:0;
	z-index:2;
}