Discussion :

[glloq8]

Bonjour, j'en appelle aux pros du CSS.

J'ai un souis :

je dois sur un lien, faire un effet rollover sur une images. Facile me direz vous, il suffit de creer une classe avec l'image en background, et de faire glisser le background en :hover....

Oui, sauf que non. En effet, c'est pour créer un rollover sur des photos de catalogue, et j'ai pas trop envie de créer une classe par article présent dans la base.

Donc je cherche à le faire en ligne :

Code :

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

<a href="#" style="width:75px;height:75px;background:url(mon_image) 0 0 no-repeat">

Sauf que arrivé là, je ne sais pas comment faire pour y introduire le :hover et pour lui dire de mettre mon background à 0 -75...

J'aimerais autant que possible éviter le OnmouseOver...

Si vous avez une idée, je suis super preneur !

Merci d'avance !!

[denisC]

Sauf que arrivé là, je ne sais pas comment faire pour y introduire le :hover

J'aimerais autant que possible éviter le OnmouseOver...

Je crois que ce n'est pas possible de déclarer un selector inline. Donc, forcément un mouseover.

et pour lui dire de mettre mon background à 0 -75...

Je comprends pas trop Tu peux réexpliquer cette partie?

[glloq8]

Et par le OnMouseOver, comment je peux faire pour lui dire de changer mon background ???

Le 0 -75, c'est la position du background !

J'ai une image avec les 2 états dedans. L'état off au dessus et on dessous. Chaque état fait 75px de haut, donc en lui disant de mettre -75 en y, il affiche l'état on... Enfin il devrait !

[denisC]

Et par le OnMouseOver, comment je peux faire pour lui dire de changer mon background ???

Code :

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

1
2
3
 
onmouseover="this.style.backgroundPosition='0 -75' "
oumouseout="this.style.backgroundPosition='0 0' "

Quelque chose dans ce gout (y'a surement des adaptations à faire).

[denisC]

Et par le OnMouseOver, comment je peux faire pour lui dire de changer mon background ???

Code :

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

1
2
3
 
onmouseover="this.style.backgroundPosition='0 -75' "
oumouseout="this.style.backgroundPosition='0 0' "

Quelque chose dans ce gout (y'a surement des adaptations à faire).

Et du coup, si tu garde la même image définie dans le CSS inline, et que tu ne veux que changer la postion, tu peux utiliser a:hover dans ta feuille de style

[glloq8]

Merci, ça marche nickel...

Au cas ou, une petite faute de frappe dans le onmouseout, tu as mis oumouseout.

Et dire que depuis 9h ce matin je galère sur ça !!!

Merci encore !