Rollover en CSS avec une seule image

Nous allons voir dans ce petit tutoriel comment effectuer un rollover en CSS en utilisant une seule et unique image. Je vous invite à faire le teste chez vous en téléchargent l'image ci-dessous qui va nous servir d'exemple.



L'objectif est d'afficher une partie de l'image en fonction de l'état du lien :

1. Si le lien n'est pas pas actif, on affiche la partie écrite en noir.
2. Si le lien est actif (survolé), on affiche la partie écrite en violet.

Le code CSS :

a.rollover {
background:url('rollover-css.png') no-repeat;
width: 456px;
height: 32px;
display:block;
}
a.rollover:hover {
background-position: bottom center;
}

On applique un display:block; à l'élément afin de lui attribuer la largeur de l'image. Sans cela, l'image ne s'afficherai pas ou en minuscule derrière le titre de votre lien!

Le code XHTML :

<a title="Rollover en CSS" href="#" class="rollover"></a>

Le résultat :

Rollover en CSS

Comme vous le constatez, le lien ne contient pas de texte et si vous souhaitez en ajouter un, il faudra alors ajouter l'élément font-size:0px; au style a.rollover. Sans cette "ajout", le texte de votre lien va s'afficher au dessus de votre image et c'est franchement pas très joli ... !

Une autre méthode est possible sur le hover :

a.rollover:hover {
background:url('rollover-css.png') no-repeat  0 -35px;
}

Dans cette exemple, -35px correspond approximativement à la moitiée de la hauteur de l'image mais en valeur négative.

Catégorie CSS