Carte interactive et survol

Version imprimable

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:

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:

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

Bonjour,

Code:

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

15/05/2016, 16h59
Toufik83

Code:

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

les doubles cotes "" de la classe overlay ne sont pas correctement fermés.
15/05/2016, 19h59
MustangNoire

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 ?
15/05/2016, 22h43
Toufik83

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

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 :/
16/05/2016, 13h15
Toufik83
t'utilise la version non compressée de jQuery (jQuery.js) ou bien celle qui est compressée (jQuery.min.js)?
si t'utilise la version non compressée il faut mettre le $ avant (function(){}) comme :
Code:

1 2 3 4 $(function(){ // équivalant de $(document).ready(function(){}); //votre code .... });
si t'utilise la version compressée (.min.js):
Code:

1 2 3 4 (function($){ //votre code .... })(jQuery);
Dans tout les cas il faut voir aussi la console de votre navigateur, Ctrl+Maj+I permet d'ouvrir l'outil de développement sous firefox et chrome.
16/05/2016, 14h23
Toufik83

j'ai fait cet exemple en choisissant une image juste pour voir la fonctionnalité de ton code https://jsfiddle.net/Toufi9/m0gj4c24/
conseils :
1- utilise mouseenter() au lieu de mouseover().
2- la fonction find() est utile pour chercher n'importe quelle balise html.
17/05/2016, 17h04
NoSmoking

concernant $(function(){ il existe aussi
:faq: :fleche: Où dois-je poser mon $ ?
17/05/2016, 17h37
MustangNoire

Je vous remercie pour toutes ces clarification , Merci Toufik83 :) je vais mettre en pratique tout cela :ange:
18/05/2016, 11h17
MustangNoire

Je vous dois une fière chandelle , ça marche à merveille , Merci :oops: :merci: