ROLLOVER AVEC PRECHARGEMENT

14.10.2005

Créer des rollovers est normalement à la portée de n'importe quel éditeur HTML de base. Cependant, il génère souvent du code à rallonge, obscure et difficile à modifier. Voici donc quelques lignes de codes javascript pour gérer vos rollovers comme un chef, avec pré-chargement des images et tout et tout.

Comment ça marche ?
En gros, nous allons créer un code qui va d'abord télécharger les images en mémoire, puis deux petites fonctions permettant de gérer les survols des images (quand la souris entre, et quand elle sort...).

Le code...
Allons-y joyeusement ! Insérer d'abord le code suivant dans le head de votre page :

<script language="javascript">
rollImage1on = new Image(150, 100);
rollImage1on.src = "monImageOn1.jpg";
rollImage2on = new Image(150, 100);
rollImage2on.src = "monImageOn2.jpg";

rollImage1off = new Image(150, 100);
rollImage1off.src = "monImageOff1.jpg";
rollImage2off = new Image(150, 100);
rollImage2off.src = "monImageOff2.jpg";

function rollOn(imgName) {
if (document.images) {
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
}

function rollOff(imgName) {
if (document.images) {
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
}
</script>

Pour adapter le code à votre page, remplacez monImageOn1.jpg par le chemin vers votre première image survol actif, et monImageOff1.jpg par la première image survol inactif. Puis faire de même avec monImageOn2.jpg, etc... Vous pouvez multiplier les lignes ainsi pour obtenir le bon nombre d'images, en prenant soin d'incrémenter les index.

Les chiffres 150 et 100 de new Image(150, 100) correspondent aux dimensions de l'image (largeur et hauteur), que vous pouvez naturellement modifier à votre guise.

Ensuite, il faut adapter la balise <img> sur chacune de vos images, en ajoutant les attributs suivants :
Pour la première image :
name = "rollImage1"
onMouseOver = "rollOn('rollImage1')"
onMouseOut = "rollOff('rollImage1')"

Pour la seconde image :
name = "rollImage2"
onMouseOver = "rollOn('rollImage2')"
onMouseOut = "rollOff('rollImage2')"

etc...

Et voilà, de beaux rollovers prêts à l'emploi !