[JavaScript] Survol d'image

Sujet résolu

Anonyme

3 septembre 2006 à 22:11:09

Bonsoir,
J'aimerai faire un effet de survol sur des images, mais je voudrais savoir si c'est possible d'utiliser trois images: on en affiche une par défaut, une autre quand on survol l'image puis encore une quand on clique dessus.
Est-ce que c'est possible de faire ça?
Merci.

EDIT:

Tudor-QVD

3 septembre 2006 à 22:43:07

Faisable en css aussi, à condition d'utiliser un lien au lieu d'une image (pour pouvoir utiliser :hover :active etc sur ie).

#image {
display: block;
width: 23px; /*Largeur de ton image*/
height: 23px; /*Hauteur de ton image*/
background-image: url('http://www.siteduzero.com/Templates/images/designs/4/menu/cours.png');
}

#image:hover {
background-image: url('http://www.siteduzero.com/Templates/images/designs/4/menu/amis.png');
}

#image:active {
background-image: url('http://www.siteduzero.com/Templates/images/designs/4/menu/pub.png');
}

Combinable aussi avec l'article sur les sprites

En javascript, il faut que tu rajoute des attributs onmousedown (quand on appuye sur le bouton), onmouseup (quand on relache le bouton), onmouseover (quand la souris rentre dans la zone de l'image) et onmouseout (quand elle ressort de la zone de l'image).

Ce qui donnerait (change juste l'image quand on clique):

A toi de rajouter les autres attributs pour changer selon l'image voulue si tu veux vraiment le faire en javascript.

edit: rofl, enfin toujours bons à savoir le css avec l'utilisation des sprites pour éviter les problèmes de chargements

Anonyme

4 septembre 2006 à 11:08:38

Oui, le css c'est pas mal, mais IE pose toujours problème :-/