Zones cliquables sur carte interactive !

lilsource Messages postés 36 Statut Membre -  
lilsource Messages postés 36 Statut Membre -
Bonjour à vous tous,

J'espère que j'aurai plus de chance ici car j'ai déjà posté sur un autre forum sans réponse.

J'ai suivi à la lettre un super Tuto fait par grafikart.fr qui permet de réaliser une carte (Map) à la façon du site leboncoin.

Cependant, en mouseover, je ne vois pas ma fameuse partie (région) avec son effet de relief.

J'espère que vous trouverez l'erreur.

Mon code java dans ma page PHP : 

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Carte de france</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
     
jQuery(function($){
    $('.map').append('<div class="overlay">').append('<div class="tooltip">salut les gens!!</div> );
    $('.map .tooltip').hide();
     
    var regions=[
        {name:'Alsace', slug:'Alsace'},
        //etc etc toutes les régions
    ];
     
    // Tooltip 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
            });
        });
     
    // On mets les liens sur les aréas
    $('.map area').each(function(){
        var index = $(this).index();
        $(this).attr ('href','http'+regions[index].slug);
        });
     
    // On passe sur une Région
    $('.map area').mouseover(function(){
        var index = $(this).index();
        var left =-index * 700 - 700;
        $('.map .tooltip').html(regions[index].name).stop().fadeTo(500,0.6);
            $('.map .overlay').css({
            backgroundPosition : left+ "px 0px"                 
            });
        });
         
    //On sort de la map
    $('.map').mouseout(function(){
        $('.map .overlay').css({
            backgroundPosition : "700px 0px"
            });
        $('.map .tooltip').stop().fadeTo(500,0);
        });
    });
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Puis à la suite, dans cette même page, mon code HTML : 

<body>
 
<div class="map"><img src="void.png" alt="map" border="0" width="700" height="500" usemap="#Map" />
  <map name="Map">
    <area shape="poly" href="" alt="Alsace" coords="597,106,617,114,598,189,587,189,576,173,581,146,587,123,577,117,579,109,594,114,598,107" />
    <area shape="poly" href="" alt="aquitaine" coords="297,292,327,310,362,286,386,314,364,366,329,377,327,390,325,428,265,399,298,291,297,294" /> <!-- etc etc... toutes les régions de France --><br>
  </map>
</div>
 
</body>
</html>

Ma feuille de styles maintenant : 

.map{
    width:700px;
    height:500px;
    background:url(map.png) left top no-repeat;
    position:relative;
}
 
.map overlay{
    width:700px;
    height:500px;
    background:url(void.png) 700px top no-repeat;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}
 
.map img{
    position:absolute;
    top:0px;
    left:0px;
    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;
}

Alors, j'ai vérifié ces codes en long en large et en travers mais je ne vois rien qui cloche.

Après, je me dis que c'est peut-être une erreur provenant de mes fichiers image.

Il faut 2 images :

- "map.png" 19600x500 large comme la carte + (la carte x le nombre de régions) Ici 28x700px de large (énorme!)

- "void.png" image vide d'une taille libre (je l'ai mise à 800x600)

je vous joins "map.png" ci-dessous en visuel (attention c'est tout petit du coup).

A voir également:

1 réponse

Réponse 1 / 1
lilsource Messages postés 36 Statut Membre
 
ça y est 21h50 !!! J'ai enfin résolu mon problème (comme une grande). C'était une apostrophe manquante au tout début de mon script !
0