Salut !
Je te propose une solution – en prêcheur infatigable que je suis
– à base de gestionnaires d’évènements.
Les gestionnaires d’évènements sont des fonctions que tu déclares dans ton script et que tu attaches à un évènement HTML, sans avoir besoin d’écrire directement dans le HTML. En plus, ils te permettent de faire de la délégation, c’est-à-dire de définir une fonction qui réagit aux clics sur chaque area en surveillant uniquement la map.
Prenons le fragment HTML suivant :
1 2 3 4 5 6 7 8 9
| <img src="carte.jpg" alt="" usemap="#carte" />
<map id="carte" name="carte">
<area id="area_1" shape="rect" coords="100,100,200,200"
nohref="nohref" title="machin" />
<area id="area_2" shape="circle" coords="150,200,25"
nohref="nohref" title="truc" />
<area id="area_3" shape="circle" coords="250,150,10"
nohref="nohref" title="bidule" />
</map> |
Note l’attribut nohref qui permet de ne pas être gêné par le comportement par défaut des clics sur area (un changement de page), le title qui permet d’afficher une infobulle et l’id qui aura son importance dans la suite.
Pour gérer un évènement, la syntaxe dépend du navigateur, la faute à – devinez – MSIE.
Pour les navigateurs standard :
maCarte.addEventListener('click', maFonction, false);
le false concerne une obscure histoire de capture d’évènements dont je ne parlerai pas ici.
Pour MSIE :
maCarte.attachEvent('onclick', maFonction);
Ensuite il faut pouvoir récupérer l’objet concerné par l’évènement. Là encore, il y a deux syntaxes…
Standard : IE : Avec d’autres élements HTML, il faudrait filtrer les clics « parasites », sur l’objet surveillé mais en dehors des objets voulus. Heureusement, la map est un peu spéciale : elle « n’existe pas » en dehors des zones définies par les area.
Vient le moment où l’id va se rendre utile : comme on a récupéré l’objet cliqué, on peut avoir son id, et comme on a prévu le coup, on cherche dans une structure de données – le mot peut faire peur mais ça peut être un simple hash – préparée à l’avance, les infos correspondantes à l’id.
Exemple :
1 2 3 4 5 6 7 8 9
| var Infos = {
area_1: 'donnees de la ville 1',
area_2: 'donnees de la ville 2',
// etc.
}
// ...
var id = ev.target.id;
var donnees = Infos[id]; |
Voilà pour les explications. J’ai fait un petit zip qui étoffe un peu, en tentant d’être cross-browser, je te le mets ici et je reste dispo pour les explications.
Partager