Bouton CSS avec effet de rollover (survol)

Vous souhaitez faire un lien avec une image pour votre menu avec un rollover.
La solution la plus simple au premier abord serait de faire ça en utilisant des balises Javascript telles que OnMouseOver et OnMouseOut.
Cependant tout ceci d’une part n’est pas très valide XHTML et qui plus est si la personne n’a pas activé le JS sur son navigateur, point de rollover (et point de lien d’ailleurs) :S
Pas génial surtout que pour ce genre de chose le JavaScript n’est pas conseillé (enfin moi je limite le js pour ce genre d’usage du moins)

Voyons plutôt une façon de faire en CSS beaucoup plus propre a mon sens.
Le principe est de creer une classe pour une div ou un p qui aura comme background l’image censée s’afficher au rollover. Ca ne parait pas logique certes, mais ca va le devenir très vite car on met sur le lien (balise a) l’image visible quand l’image n’est pas survolé (ou rollout si je puis me permettre ^^).

Script css

.rollover {
     width: 150px;
     height: 30px;
     background: transparent url(img/lien_rollover.jpg)  no-repeat;
}
.rollover a {
     display: block;
     width: 100%;
     height: 100%;
     background: url(img/lien.jpg) no-repeat;
}
.rollover a:hover { /* masquage de lien.jpg au survol */
     background: transparent none;
}
 

Notez que j’indique la hauteur et largeur (height et width) suivant la taille de l’image utilisée étant donné que nous faisons “un lien vide” comme ci-dessous :

Script html

     <div class="rollover"><a href="#" title="lien"></a></div>
 

Et voilà le tour est joué

Petite démo de ce que cela peut donner :

.rollover { width: 180px; height: 40px; background: transparent url(http://webdev.jegalere.fr/wp-content/uploads/2007/08/img2.gif) no-repeat; } .rollover a { display: block; width: 100%; height: 100%; background: url(http://webdev.jegalere.fr/wp-content/uploads/2007/08/img1.gif) no-repeat; } .rollover a:hover { /* masquage de lien.jpg au survol */ background: transparent none; } bouton, css, rollover, tuto, xhtml