Zones cliquables sur carte interactive !

Fermé

lilsource Messages postés 34 Date d'inscription vendredi 8 novembre 2013 Statut Membre Dernière intervention 17 mars 2023 - 30 juin 2014 à 14:17
lilsource Messages postés 34 Date d'inscription vendredi 8 novembre 2013 Statut Membre Dernière intervention 17 mars 2023 - 30 juin 2014 à 21:51

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:

Zones cliquables sur carte interactive !
Carte d'identité - Accueil - Services publics
Pile carte mere - Guide
Mettre des points sur une carte - Guide
Blocage agriculteur carte en temps réel - Accueil - Transports & Cartes
Changer carte graphique - Guide

1 réponse

Réponse 1 / 1

lilsource Messages postés 34 Date d'inscription vendredi 8 novembre 2013 Statut Membre Dernière intervention 17 mars 2023
30 juin 2014 à 21:51

ç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 !

Discussions similaires

Arnaque ou pas?

Carte bancaire passée à la machine à laver

Carte roblox mal gratté illisible

Zelda breath of the wild sanctuaire