Codage carte interactive help

Bonjour à tous,

J'ai codé une carte de France interactive en 21 zones.
Ce que je souhaite : quand je clic sur une zone, une div apparait avec une liste d'école attitrée à ma zone.

J'ai donc un code pour les zones qui ressemble à cela dans mon HTML :

<img src="imgs/cartefrance.png" alt="" usemap="#map" id="map" border"0">
     
    <map name="map" id="map2">
     
     <area shape="poly" coords="186,12,173,15,171,31,182,36,196,40,210,42,227,45,223,38" href="" style="outline:0;"/>

     <area shape="poly" coords="175,37,168,46,175,57,173,76,202,78,214,86,218,72,226,66,226,57,230,48" href="#"  style="outline:0;"/>
             
     <area shape="poly" coords="163,48,148,55,136,60,140,85,148,91,160,89,163,80,169,74,170,64,168,53" href="#"  style="outline:0;"  />

Et un code pour mes div qui ressemble à cela :

<div id="col_droit">
    
     <div id="zone1" class="result" style="display:none;">
         <i class="fa fa-times close" onclick="toutCacher('result','masktitle');"></i>
            <div id="titrezone1">
            <span class="titre">LISTE RESULTATS <span class="depart">NORD PAS DE CALAIS</span></span>
            </div>
                <ul class=listezone1>
                         <br />
                         <br />
                        <li>  CFA BTP Lille Métropôle </li>
                        <li> CFA BTP Hesdigneul-Lès-Boulogne</li>
                        <li> CFA-BTP Marly les Valenciennes</li>
                        <li> Lycée TP le Bois des Dames</li>  
                    </ul>
    </div>
     
     <div id="zone2" class="result" style="display:none;">
         <i class="fa fa-times close" onclick="toutCacher('result','masktitle');"></i>
            <div id="titrezone2"> 
                 <span class="titre">LISTE RESULTATS <span class="depart">PICARDIE</span></span>                  
            </div>
                <ul class=listezone2>
                         <br />
                         <br />
                        <li>  CFA-BTP Somme  </li>
                        <li>  CFA-BTP Aisne</li>
                        <li>  CFA-BTP Oise</li> 
                    </ul>
    </div>

Et bien entendu avec mon Javascript ci-dessous dans une page javascript, cela ne marche pas ...

var divPrecedent=document.getElementById('zone1');
var divMenuActu=document.getElementById('body_right1');
var divTitle=document.getElementById('masktitle');
function visibilite(divId)
{
    divPrecedent.style.display='none';
    divPrecedent=document.getElementById(divId);
    divPrecedent.style.display='';
}
function visibiliteActu(divId)
{
    divMenuActu.style.display='none';
    divMenuActu=document.getElementById(divId);
    divMenuActu.style.display='';
}

function affTitle(divId)
{
    divTitle=style.display='none';
    divTitle=document.getElementById(divId);
    divTitle.style.display='';
}

Est ce quelqu'un à déjà coder une carte interactive ? avec apparition et disparition de div en javascript ?

Merci beaucoup pour vos remarques, aides ..

Personnes pour me dire au moins si j'ai d'énormes bétises de codage ? Ou m'indiquer une voix de réflexion pour que je trouve ?

MERCI beaucoup
Modifié par Siana (23 Apr 2014 - 14:25)

salut,
il n'y a rien de compliquer à créer ce que tu veux. S'il s'agit d'afficher du contenu qui est déjà présent sur la même page, le mieux serait de diriger directement le lien vers l'ancre du contenu ciblé

<area shape="poly" coords="186,12,173,15,171,31,182,36,196,40,210,42,227,45,223,38" href="#MonContenu" />

Au passage, tu devrais garder l'outline sur les liens.
Ensuite tu récupérerais la cible de ce lien via JS pour faire apparaître l'élément ciblé. Tu peux même te passer de JS pour les navigateurs récents grâce à ":target".
Je t'ai concocté un exemple somptueux pour décrire tout ça

Bonjour,

sans rapport avec la question mais important quand même : pour les éléments area avec un attribut href, l'attribut alt est obligatoire, tout comme pour un élément img (et input[type="image"], aussi).
Le rôle est le même que pour une image seule dans un lien : décrire ce qu'il se passe si on clique sur cette zone (ça peut être 'Aquitaine' a priori)
Modifié par Felipe (23 Apr 2014 - 18:39)