aide pour creer une carte interactive

marwa92
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
Auteur

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

Bonjour.
Et donc, quelle est ta demande exacte ?

marwa92
Auteur

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

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

marwa92
Auteur

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

Lartak

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
Auteur

rien j'ai pas trouver de solution

Lartak

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
Auteur

je l'ai deja essayer ca mais ca fonctionne pas

Lartak

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

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

.map.tooltip {
position:absolute;
marwa92
Auteur

je l'ai corrigé mais toujour pas de resultat

Lartak

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

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
Auteur

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

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

marwa92
Auteur 
<!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
Auteur 
.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

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
Auteur

nn c la meme image

Carouge10

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

Huggy

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

marwa92
Auteur

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