aide pour creer une carte interactive

Par marwa92, il y a 11 ans

Javascript

mon fichier html

<!DOCTYPE html> <html lang="fr"> <head> <title>carte</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="map.css" /> </head> <body> <div class="map"> <img src="void.png" alt="map" width="251" height="500" usemap="#Map" class="map" /> <map name="Map"> <area shape="poly" alt="Nabeul" coords="172,75,171,60,182,53,186,47,194,47,203,38,211,50,201,62,192,77,180,80" href="#"> <area shape="poly" alt="Ben Arous" coords="168,72,171,64,161,55,153,63" href="#"> <area shape="poly" alt="Tunis" coords="166,54,153,55,155,47,162,47,168,50" href="#"> <area shape="poly" alt="Ariana" coords="154,57,147,59,149,42,154,32,156,25,161,27,160,42,154,49" href="#"> <area shape="poly" alt="Bizerte" coords="151,40,138,35,116,52,110,44,103,31,108,22,128,20,137,16,136,31,144,21,152,29" href="#"> <area shape="poly" alt="Manouba" coords="148,63,148,41,136,41,130,48,142,64" href="#"> <area shape="poly" alt="Beja" coords="125,45,142,60,133,75,123,75,122,72,114,74,103,77,93,72,98,59,98,50,90,48,95,40,92,36,99,27,109,46" href="#"> <area shape="poly" alt="Jendouba" coords="100,65,97,49,93,49,96,40,91,36,84,42,79,42,75,46,70,52,62,51,65,61,58,68,50,72,50,76,71,76,87,74" href="#"> <area shape="poly" alt="Zaghouan" coords="147,97,163,93,168,85,169,78,157,69,151,62,144,66,133,75,129,81,130,89,138,98" href="#"> <area shape="poly" alt="Siliana" coords="114,139,95,125,97,119,100,108,103,102,98,98,94,86,90,74,94,72,105,77,118,75,128,77,131,83,136,96,127,104,121,112,118,125,109,123" href="#"> <area shape="poly" alt="Kef" coords="94,126,95,114,104,106,90,91,88,77,77,77,63,80,54,88,54,109,53,123,70,122,79,118" href="#"> <area shape="poly" alt="Sousse" coords="178,83,169,88,160,97,166,106,160,119,166,131,177,138,183,132,187,120,176,110" href="#"> <area shape="poly" alt="Kairouan" coords="151,169,161,165,158,155,164,133,160,120,159,107,155,98,150,103,127,105,118,120,115,129,120,148" href="#"> <area shape="poly" alt="Kasserine" coords="111,140,77,123,67,127,59,132,54,147,60,158,55,169,52,178,57,191,64,198,79,192,91,184,106,175,94,174,105,163,107,170" href="#"> <area shape="poly" alt="Monastir" coords="194,142,203,137,199,132,185,124,178,135,181,137" href="#"> <area shape="poly" alt="Mahdia" coords="208,167,206,153,204,144,191,144,177,140,165,134,159,150,162,164,182,159" href="#"> <area shape="poly" alt="Sfax" coords="192,164,206,174,191,192,174,207,151,220,144,227,128,222,150,209,140,202,139,191,151,174,166,165,185,165,180,160" href="#"> <area shape="poly" alt="Sidi Bouzid" coords="126,219,139,214,148,205,142,199,139,189,150,175,139,163,123,154,110,147,104,156,104,169,96,183,89,188,108,193" href="#"> <area shape="poly" alt=" Gafsa" coords="63,232,88,233,95,229,105,227,117,225,122,215,106,205,95,196,77,196,64,197,46,197,45,208,37,216,48,225" href="#"> <area shape="poly" alt="Tozeur" coords="40,207,28,215,24,227,12,230,8,245,12,266,23,275,41,265,51,255,66,243,71,236,49,229" href="#"> <area shape="poly" alt="Gabes" coords="135,288,156,280,171,268,158,255,145,239,137,228,124,223,112,228,109,240,101,245,118,276" href="#"> <area shape="poly"alt="Kebili" coords="21,278,22,292,36,297,49,312,55,335,85,326,101,327,127,326,129,320,139,326,143,312,138,298,130,287,118,270,108,259,104,248,104,240,106,230,87,232,71,236" href="#"> <area shape="poly" alt="Mednine"coords="191,248,170,273,150,284,137,295,143,304,169,293,188,293,199,300,209,322,213,336,217,350,227,347,232,339,232,307,206,257" href="#"> <area shape="poly" alt="Tataouine" coords="120,486,103,425,93,387,95,369,55,341,92,328,121,328,139,325,142,328,147,307,166,301,180,295,201,310,204,327,214,349,193,366,178,376,165,389,155,392,154,431,153,453" href="#"> </map> </div> <script type="text/javascript"> jQuery(function($){ // ajoute une couche pour la colorisation des régions et créer la bulle $('.map').append('<div class="overlay">').append('<div class="tooltip"> '); //masque la bulle $('.map .tooltip').hide(); //définition des régions var regions=[ {name:'Nabeul', slug:'Nabeul'}, {name:'Ben Arous', slug:'Ben Arous'}, {name:'Tunis', slug:'Tunis'}, {name:'Ariana', slug:'Ariana'}, {name:'Bizerte', slug:'Bizerte'}, {name:'Manouba', slug:'Manouba'}, {name:'Beja', slug:'Beja'}, {name:'Jendouba', slug:'Jendouba'}, {name:'Zaghouan', slug:'Zaghouan'}, {name:'Siliana', slug:'Siliana'}, {name:'Kef', slug:'Kef'}, {name:'Sousse', slug:'Sousse'}, {name:'Kairouan', slug:'Kairouan'}, {name:'Kasserine', slug:'Kasserine'}, {name:'Monastir', slug:'Monastir'}, {name:'Mahdia', slug:'Mahdia'}, {name:'Sfax', slug:'Sfax'}, {name:'Sidi Bouzid', slug:'Sidi Bouzid'}, {name:'Gafsa', slug:'Gafsa'}, {name:'Tozeur', slug:'Tozeur'}, {name:'Gabes', slug:'Gabes'}, {name:'Kebili', slug:'Kebili'}, {name:'Mednine', slug:'Mednine'}, {name:'Tataouine', slug:'Tataouine'}, ]; // bulle qui suit la souris $(document).mousemove(function(e){ $('.map .tooltip').css({ top: e.pageY-$('.map .tooltip').height()-20, left: e.pageX-$('.map .tooltip').width()/2-10 }); }); // lien sur les régions /* $('.map area').each(function(){ var index=$(this).index(); $(this).attr('href','asso.html?asso='+regions[index].slug); });*/ // passage sur une région $('.map area').mouseover(function(){ var index = $(this).index(); var left= -index * 251 - 251; $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0.8); $('.map .overlay').css({ backgroundPosition:left+"px 0px" }); }); // on sort de la map $('.map area').mouseout(function(){ $('.map .overlay').css({ backgroundPosition:"251px 0px" }); $('.map .tooltip').stop().fadeTo(500,0); }); }); </script> </body> </html>

23 réponses

marwa92, il y a 11 ans

mon fichier css

.map{ width:251px; height:500px; background: url(tun.png) left top no-repeat ; position:relative; } .map.overlay{ width:251px; height:500px; background: url(tun.png) 251px top no-repeat ; position:absolute; left:0; top:0; z-index:1; } .map.img{ position:absolute; top:0; left:0; z-index:2; } .map.tooltip{ position:abdolute; border-radius:5px; color:#fff; background:#000; padding:0 10px; display:inline; top:0; left:0; Z-index:3; }
Lartak, il y a 11 ans

Bonjour.
Et donc, quelle est ta demande exacte ?

marwa92, il y a 11 ans

mon problème c que j'obtient pas une carte comme celle ci http://www.grafikart.fr/demo/jQuery/maparea/
en faite j'ai l'affichage de ma carte ainsi que lorsque je passe ma souris sur zone j'ai le nom de la region qui s'affiche en bas de la photo et la region ne se colore pas je sais pas pourquoi c quoi mon problème je comprend rien ca fait 3 nuits que je dors pas svp aidez moi a trouver l'erreur et merci

Lartak, il y a 11 ans

Est-ce que le tooltip est stylisé ?
Tu n'as aucune erreur dans la console de l'inspecteur de ton navigateur ?

marwa92, il y a 11 ans

en faite je travaille sous eclipse moi et j'execute sur google chrome
que voulais vous dire de "tooltip est stylisé "

Lartak, il y a 11 ans

Quand je parle de console et d'inspecteur, je te parle de ceux de ton navigateur internet et non de ton éditeur de code.
Tu as peut-être un soucis de javascript et tu pourrais le voir dans la console de l'inspecteur de ton navigateur internet.

marwa92, il y a 11 ans

rien j'ai pas trouver de solution

Lartak, il y a 11 ans

Tu n'aurais pas oublié de fermer la balise div du tooltip par hasard ?
Remplaces :

$('.map').append('<div class="overlay">').append('<div class="tooltip"> ');

Par :

$('.map').append('<div class="overlay">').append('<div class="tooltip"></div>');
marwa92, il y a 11 ans

je l'ai deja essayer ca mais ca fonctionne pas

Lartak, il y a 11 ans

Pourtant, un élément qui n'est par refermé, ça pose des problèmes en général.
Ce ne serait pas la class map sur l'image qui pose problème ?

Huggy, il y a 11 ans

Tu as une erreur dans ton css, tu as écrit abdolute

.map.tooltip { position:absolute;
marwa92, il y a 11 ans

je l'ai corrigé mais toujour pas de resultat

Lartak, il y a 11 ans

Tu as une erreur dans ton css, tu as écrit abdolute

Son problème ne vient pas du tooltip, mais de l'animation des régions, ce n'est donc pas ça qui va régler son problème, bien que ce ne soit pas une remarque inutile.
@marwa95: As-tu enlevé la classe map sur l'image ?
Pour voir si la modification css s'effectue pour le background des régions, c'est dans la div overlay, dans l'attribut style.

Huggy, il y a 11 ans

Tu as fait une image avec toutes tes régions en long, c'est ça ? une sorte de ruban ?
moi je vois des offsets de -3000px dans le background-position
mais je ne peux pas tester

marwa92, il y a 11 ans

j'arrive a realiser que lorsque j'ouvre l'inspecteur de mon navigateur et je clique sur

<div class="overlay" style="background-position: 251px 0px;">

et meme

<div class="tooltip" style="left: 191px; top: 280px; display: block; opacity: 0;"></div>

le style css ne s'affiche pas pour ces deux classe est ce que quelqu'un a une idée sur ca!!!!!

Carouge10, il y a 11 ans

Pouvez-vous nous remettre le code html et css afin de bien suivre les modification que nous avons demander d'apporter. Merci.

marwa92, il y a 11 ans
<!DOCTYPE html> <html lang="fr"> <head> <title>carte</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="map.css" /> </head> <body> <div class="map"> <img src="void.png" alt="map" width="251" height="500" usemap="#Map" /> <map name="Map"> <area shape="poly" alt="Nabeul" coords="172,75,171,60,182,53,186,47,194,47,203,38,211,50,201,62,192,77,180,80" href="#"> <area shape="poly" alt="Ben Arous" coords="168,72,171,64,161,55,153,63" href="#"> <area shape="poly" alt="Tunis" coords="166,54,153,55,155,47,162,47,168,50" href="#"> <area shape="poly" alt="Ariana" coords="154,57,147,59,149,42,154,32,156,25,161,27,160,42,154,49" href="#"> <area shape="poly" alt="Bizerte" coords="151,40,138,35,116,52,110,44,103,31,108,22,128,20,137,16,136,31,144,21,152,29" href="#"> <area shape="poly" alt="Manouba" coords="148,63,148,41,136,41,130,48,142,64" href="#"> <area shape="poly" alt="Beja" coords="125,45,142,60,133,75,123,75,122,72,114,74,103,77,93,72,98,59,98,50,90,48,95,40,92,36,99,27,109,46" href="#"> <area shape="poly" alt="Jendouba" coords="100,65,97,49,93,49,96,40,91,36,84,42,79,42,75,46,70,52,62,51,65,61,58,68,50,72,50,76,71,76,87,74" href="#"> <area shape="poly" alt="Zaghouan" coords="147,97,163,93,168,85,169,78,157,69,151,62,144,66,133,75,129,81,130,89,138,98" href="#"> <area shape="poly" alt="Siliana" coords="114,139,95,125,97,119,100,108,103,102,98,98,94,86,90,74,94,72,105,77,118,75,128,77,131,83,136,96,127,104,121,112,118,125,109,123" href="#"> <area shape="poly" alt="Kef" coords="94,126,95,114,104,106,90,91,88,77,77,77,63,80,54,88,54,109,53,123,70,122,79,118" href="#"> <area shape="poly" alt="Sousse" coords="178,83,169,88,160,97,166,106,160,119,166,131,177,138,183,132,187,120,176,110" href="#"> <area shape="poly" alt="Kairouan" coords="151,169,161,165,158,155,164,133,160,120,159,107,155,98,150,103,127,105,118,120,115,129,120,148" href="#"> <area shape="poly" alt="Kasserine" coords="111,140,77,123,67,127,59,132,54,147,60,158,55,169,52,178,57,191,64,198,79,192,91,184,106,175,94,174,105,163,107,170" href="#"> <area shape="poly" alt="Monastir" coords="194,142,203,137,199,132,185,124,178,135,181,137" href="#"> <area shape="poly" alt="Mahdia" coords="208,167,206,153,204,144,191,144,177,140,165,134,159,150,162,164,182,159" href="#"> <area shape="poly" alt="Sfax" coords="192,164,206,174,191,192,174,207,151,220,144,227,128,222,150,209,140,202,139,191,151,174,166,165,185,165,180,160" href="#"> <area shape="poly" alt="Sidi Bouzid" coords="126,219,139,214,148,205,142,199,139,189,150,175,139,163,123,154,110,147,104,156,104,169,96,183,89,188,108,193" href="#"> <area shape="poly" alt=" Gafsa" coords="63,232,88,233,95,229,105,227,117,225,122,215,106,205,95,196,77,196,64,197,46,197,45,208,37,216,48,225" href="#"> <area shape="poly" alt="Tozeur" coords="40,207,28,215,24,227,12,230,8,245,12,266,23,275,41,265,51,255,66,243,71,236,49,229" href="#"> <area shape="poly" alt="Gabes" coords="135,288,156,280,171,268,158,255,145,239,137,228,124,223,112,228,109,240,101,245,118,276" href="#"> <area shape="poly"alt="Kebili" coords="21,278,22,292,36,297,49,312,55,335,85,326,101,327,127,326,129,320,139,326,143,312,138,298,130,287,118,270,108,259,104,248,104,240,106,230,87,232,71,236" href="#"> <area shape="poly" alt="Mednine"coords="191,248,170,273,150,284,137,295,143,304,169,293,188,293,199,300,209,322,213,336,217,350,227,347,232,339,232,307,206,257" href="#"> <area shape="poly" alt="Tataouine" coords="120,486,103,425,93,387,95,369,55,341,92,328,121,328,139,325,142,328,147,307,166,301,180,295,201,310,204,327,214,349,193,366,178,376,165,389,155,392,154,431,153,453" href="#"> </map> </div> <script type="text/javascript"> jQuery(function($){ // ajoute une couche pour la colorisation des régions et créer la bulle $('.map').append('<div class="overlay">').append('<div class="tooltip"> </div> '); //masque la bulle $('.map .tooltip').hide(); //définition des régions var regions=[ {name:'Nabeul', slug:'Nabeul'}, {name:'Ben Arous', slug:'Ben Arous'}, {name:'Tunis', slug:'Tunis'}, {name:'Ariana', slug:'Ariana'}, {name:'Bizerte', slug:'Bizerte'}, {name:'Manouba', slug:'Manouba'}, {name:'Beja', slug:'Beja'}, {name:'Jendouba', slug:'Jendouba'}, {name:'Zaghouan', slug:'Zaghouan'}, {name:'Siliana', slug:'Siliana'}, {name:'Kef', slug:'Kef'}, {name:'Sousse', slug:'Sousse'}, {name:'Kairouan', slug:'Kairouan'}, {name:'Kasserine', slug:'Kasserine'}, {name:'Monastir', slug:'Monastir'}, {name:'Mahdia', slug:'Mahdia'}, {name:'Sfax', slug:'Sfax'}, {name:'Sidi Bouzid', slug:'Sidi Bouzid'}, {name:'Gafsa', slug:'Gafsa'}, {name:'Tozeur', slug:'Tozeur'}, {name:'Gabes', slug:'Gabes'}, {name:'Kebili', slug:'Kebili'}, {name:'Mednine', slug:'Mednine'}, {name:'Tataouine', slug:'Tataouine'}, ]; // bulle qui suit la souris $(document).mousemove(function(e){ $('.map .tooltip').css({ top: e.pageY-$('.map .tooltip').height()-20, left: e.pageX-$('.map .tooltip').width()/2-10 }); }); // lien sur les régions /* $('.map area').each(function(){ var index=$(this).index(); $(this).attr('href','asso.html?asso='+regions[index].slug); });*/ // passage sur une région $('.map area').mouseover(function(){ var index = $(this).index(); var left= -index * 251 - 251; $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0.8); $('.map .overlay').css({ backgroundPosition:left+"px 0px" }); }); // on sort de la map $('.map area').mouseout(function(){ $('.map .overlay').css({ backgroundPosition:"251px 0px" }); $('.map .tooltip').stop().fadeTo(500,0); }); }); </script> </body> </html>
marwa92, il y a 11 ans
.map{ width:251px; height:500px; background: url(tun.png) left top no-repeat ; position:relative; } .map .overlay{ width:251px; height:500px; background: url(tun.png) 251px top no-repeat ; position:absolute; left:0; top:0; z-index:1; } .map.img{ position:absolute; top:0; left:0; z-index:2; } .map .tooltip{ position:absolute; border-radius:5px; color:#fff; background:#000; padding:0 10px; display:inline; top:0; left:0; Z-index:3; }
Huggy, il y a 11 ans

Es-tu certain que le background de la map et le background de l'overlay soient la même image 'tun.png' ?
pour moi ce sont deux images différentes

marwa92, il y a 11 ans

nn c la meme image

Carouge10, il y a 11 ans

Dans le css
Remplacer ".map.img" par ".map img"

Huggy, il y a 11 ans

de même il faut séparer les classes ".map.overlay" devient ".map .overlay"
idem avec ".map.tooltip" qui devient ".map .tooltip"

marwa92, il y a 11 ans

c bon je viens de créer un nouveau projet et ca marche enfin alors que l'erreur je sais pas elle etait ou :p mais l'essentiel qu'elle fonctionne maintenant merci a tt le monde :)