Discussion :

[reman]

Bonjour,

Nous voyons souvent un effet rollover sur l'image qui remplace le bouton de validation d'un formulaire par exemple.
La méthode utilisée est souvent les coordonnées en X & Y d'une même image de ce type :

On se sert des coordonnées en X & Y pour afficher la partie supérieur en affichage normale et la partie inférieur en état hover lorsque le curseur de la sourie passe dessus.

Comment ça marche en Javascript et comment on fait cela ?!

Merci pour vos réponses

[E.Bzz]

Bonjour,

Comment ça marche en Javascript et comment on fait cela ?!

Comme indiqué dans la FAQ

Et pas besoin de connaitre les coordonnées

A+

[SpaceFrog]

Heu non avec une seule image en background css ... il suffit de modifier le backgroundPositon de top à bottom

[reman]

ok genre ça en css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
.images {
width: 196px;
height: 91px; /* correspond à la moitié de la hauteur de mon image */
backgroundPositon: top;
}
 
.images:hover {
width: 196px;
height: 91px; /* correspond à la moitié de la hauteur de mon image */
backgroundPositon: bottom; 
}

[SpaceFrog]

oui sauf que seules les version recentes de IE acceptent le hover pour autre chaose que la balise a.
l suffit d'avoir deux class et de modifier le className sur le mouseover et mouseout

[reman]

Peux tu me donner un exemple en utilisant mon image plus haut.
le but est que cette image qui est contenue dans un block "div"
qui fait la moitié en hauteur de cette image.
Un exemple et tjrs plus parlant !

Merci !!