Le terme rollover indique le changement d’état d’une image au passage de la souris. Dans cet exemple, nous allons utiliser cette fonction pour créer un bouton.

En CSS, il existe plusieurs façons de créer cet effet mais dans cet article je ne détaillerai que la méthode que j’utilise régulièrement.

Elle présente 3 avantages:

• Les deux images sont chargées à l’ouverture de la page (pas d’attente pendant le changement d’image)
• pas de JavaScript
• W3C valide

Présentation du code: (voir l’exemple)

La partie HTML:

1. <a class="bouton" href="lien.html"><img border="0" src="bouton.jpg" alt="bouton" /></a>

La partie CSS:

1. a.bouton {
2. display:block;
3. width:XXpx;
4. height:XXpx;
5. background-image:url("bouton_hover.jpg");
6. }
7. a.bouton:hover {
8. visibility:visible;
9. }
10. a.bouton:hover img {
11. visibility:hidden;
12. }

Remplacer les XX dans width et height par les dimensions de votre image !

L’exemple en téléchargement: