Dans mon dernier article (voir), j’ai indiqué que la première solution de carte interactive que j’avais présentée dans une série de deux articles (1 et 2) ne fonctionnait pas sous Chrome.
Récemment, en consultant le code d’une page de reserves-naturelles.org, je me suis aperçu que la carte des régions de ce site fonctionnait sur le même principe que ma première solution et fonctionnait sous Chrome.
En comparant les deux codes je me suis aperçu de la différence : la map utilisée avait un attribut id au lieu d’un attribut name, ce qui fait que Chrome était incapable de la charger.
La démo originale a été corrigée, mais j’ai également fait une nouvelle version utilisant uniquement du JavaScript natif.
Le code HTML reste le même. Le code JavaScript est le suivant :
var areas = document.getElementsByTagName("area"); // array de toutes les areas
var target = document.getElementById("hovered"); // image dont on va changer la source
for (var i=0; i < areas.length; i++) { // pour chaque area de la page
areas[i].addEventListener("mouseenter", function(evt) { // attachement à l'entrée de la souris
// on récupère l'attribut "id" de l'élément déclencheur avec evt.target.getAttribute("id")
target.src = "/assets/files/images/" + evt.target.getAttribute("id") + ".png"; // on change la source de l'image de couverture
});
areas[i].addEventListener("mouseleave", function(evt) { // attachement à la sortie de la souris
target.src = "/assets/files/images/map.gif"; // on rétablit l'image transparente
});
}
Comme quoi, même après plusieurs années on apprend toujours.
