Carte interactive et survol

**MustangNoire** · 15/05/2016, 14h02

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

**NoSmoking** · 15/05/2016, 14h29

Bonjour,

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

il te faut commencer par écrire du code correct

**Toufik83** · 15/05/2016, 16h59

Code :

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

§('.djazmap').append('<div class="overlay>');

les doubles cotes "" de la classe overlay ne sont pas correctement fermés.

**MustangNoire** · 15/05/2016, 19h59

je tacherai de faire mieux pour le code . Et Merci pour les cotes , je ne les avait pas remarquées

En fait ça ne marche toujours pas , j ai remplacé la source de jquery par un chemin de fichier .js local me disant qu 'il ne se chargeait peut etre pas mais toujour rien ... Est ce que la syntaxe d'inclusion est correcte ?

**Toufik83** · 15/05/2016, 22h43

oulala, j'ai pas remarqué les §§§§, d'après ce que je sais moi c'est qu'on utilise le dollar $, et pas le §.

**MustangNoire** · 15/05/2016, 23h27

Il me faut une paire de lunette . C est bien le $ qu il faut :p merci encore , jai aussi omis les point.class le tout corigé ,hèlas pas grand chose qui change :/

Carte interactive et survol

jQuery

Vue hybride

Discussions similaires

Partager

Partager