Effet de roll over javascript avec des images
Il est très classique de créer des effets de survol (roll-over) avec des images. Le plus généralement, on utilise le langage javascript pour cela. C'est très simple, mais fastidieux.Voici une solution originale qui permet de ne pas "pourrir" son code html avec des vilains onmouseover="roll(truc)" dans les balises IMG ou A, ni même à avoir à ajouter une seule ligne d'association déclencheur --> fonction, si comme moi vous séparez votre code javascript de votre code HTML.
La convention est la suivante : toutes les images dont le nom est toto_off.png (ou .gif ou .jpg) seront remplacées par l'image toto_on.png lorsqu'on la survole avec la souris.
Pour cela, il suffit de mettre ce morceau de javascript dans votre page, ou de préférence le mettre dans un petit fichier à part, appelé avec une balise <script src="roll.js" type="text/javascript" />.
Voici le code :
function roll_on() {
this.src = this.src.replace(/_off/,'_on');
}
function roll_off() {
this.src = this.src.replace(/_on/,'_off');
}
function img_test() {
for (i = 0; i < document.images.length; i++) {
if (document.images[i].src.indexOf('_off.') > 0) {
document.images[i].onmouseover = roll_on;
document.images[i].onmouseout = roll_off;
}
}
}
img_test();roll_on() est une fonction on ne peut plus idiote qui assure le passage toto_off.png --> toto_on.png
roll_off() idem pour le retour toto_on.png --> toto_off.png
img_test() balaye toutes les images de la page. si une image contient la chaine _off. alors on lui associe les deux fonctions de roll sur leurs events mouseover et mouseout.
On est alors obligé d'appeler la fonction img_test() pour lancer la mécanique.
Attention a lancer img_test() plutôt en fin de page, lorsque toutes les images de votre document ont été définies.
Voilà, c'est clean, simple, et surtout ça garde votre code html et javascript au minimum.
Tags : javascript
Commentaires
Ca a l'air impeccable!
Le seul probleme, je n'arrive pas à le faire fonctionner! :p
j'ai renommé toutes mes images de navigation en truc_on.jpg et truc_off.jpg, mis le roll. js dans le meme repertoire que la page (les images sont dans un sous-dossier), et lié le html au js. Aucun effet. :s Qu'est-ce quej'ai pu faire de travers?
J'aimerais bien que ca fonctionne, vu que c'est bien plus simple et facile à réutiliser pour un noob comme moi. :)
Ah, et désolé si j'ai posté au mauvais endroit, j'ai pas trouvé plus adapté. Merci!
Le seul probleme, je n'arrive pas à le faire fonctionner! :p
j'ai renommé toutes mes images de navigation en truc_on.jpg et truc_off.jpg, mis le roll. js dans le meme repertoire que la page (les images sont dans un sous-dossier), et lié le html au js. Aucun effet. :s Qu'est-ce quej'ai pu faire de travers?
J'aimerais bien que ca fonctionne, vu que c'est bien plus simple et facile à réutiliser pour un noob comme moi. :)
Ah, et désolé si j'ai posté au mauvais endroit, j'ai pas trouvé plus adapté. Merci!
, le 2008-10-21 à 00h26
Ecrire votre commentaire
Vous devez vous connecter pour pouvoir ajouter un commentaire.
Un must !
Merci beaucoup MetaCites = }