J'ai testé bon nombre de méthodes pour ajouter des rollovers aux images — y compris le code omniprésent de DreamWeaver. J'utilisais depuis longtemps le script soopa-rollovers de youngpup.net. Problème : il impose l'utilisation d'attributs qui n'existent pas dans les normes, et les pages ne valident1 plus.
La méthode la plus en vogue actuellement est le rollover en CSS, qui ne nécessite pas de javascript ni d'image séparée pour le rollover. C'est parfait pour les menus, mais infernal pour le rollover « accidentel » : ça impose de modifier le CSS à chaque fois.
Mon dernier choix est d'utiliser l'attribut class. Ça respecte la lettre de la norme — mais probablement pas son esprit. Enfin, le XHTML est valide.
Le marquage est simple ; on ajoute hover:rollover.gif à la classe, par exemple :
<img src="/images/download.gif" class="button hover:/images/download_ro.gif" />
Le code comporte trois fonctions. La première recherche les images avec une classe hover: et affecte les fonctions rolloverOn et rolloverOff aux événements onmouseover et onmouseout.
function rolloverSetup()
{
var img
for (var i = 0; (img = document.images[i]); i++) {
if (img.getAttribute) {
iclass = img.className;
isrc = img.getAttribute("src");
if (iclass != null && iclass.indexOf("hover:") >= 0 && isrc != null && isrc != "") {
ihover = iclass.slice(iclass.indexOf("hover:") + 6);
if (ihover.indexOf(" ") > 0)
ihover = ihover.slice(0, ihover.indexOf(" "))
if (ihover != "") {
img.hover = new Image();
img.hover.org = img.src;
img.hover.src = ihover;
img.onmouseover = rolloverOn
img.onmouseout = rolloverOff
}
}
}
}
}
On va récupérer la classe (l.7) ; si elle contient hover:, on récupère le nom de l'image (l.10-12). On mémorise l'image d'origine (l.15) et la nouvelle (l.16) [en la préchargeant pendant qu'on y est]. Finalement on affecte les fonctions qui changent l'image aux événements onmouseover et onmouseout
1. J'assume le néologisme grammatical.
