Rollover à une seule image

Publié le 30 juillet 2006 par Francisek

Vous connaissez certainement l'effet de rollover qui consiste à subsituter une image de fond survolée par la souris avec une autre image. Cet effet permet d'ajouter de l'interacivité à votre site, et est très souvent utilisé pour animer des boutons.
Plusieurs techniques permettent d'obtenir cet effet, du simple code HTML (non conforme XHTML) à l'utilisation du javascript.
Ces méthodes traditionnelles présentent cependant des désavantages:

avec de petites connections (modem par exemple), l'image de substitution peut ne pas être chargée à temps. Le palliatif traditionnel est de précharger l'image par javascript ou HTML (dans un élément invisible), ce qui a pour effet de multiplier les transactions avec le serveur d'images.
si vous changez ou déplacez une image, vous devrez penser à aussi modifier la deuxième image.
lorsque le javascript est désactivé, il n'y a plus de rollover.

Saviez-vous que par une petite astuce, on peut obtenir le même effet en CSS et ce avec une seule image? Ainsi vous réduirez la charge des serveurs et faciliterez la maintenance de votre site en ne modifiant plus qu'une seule image.
L'astuce est simple. Prenons le cas d'une image-bouton de 100x100px qui changera de couleur lorsqu'elle sera survolée par la souris. Traditionnellement, nous écririons le code HTML suivant pour afficher l'image dans un lien:

Le CSS nous permettant d'appliquer une image en fond d'un élément, nous pouvons aussi écrire ce code équivalent:

et encore mieux, en séparant le fond de la forme:

pour le HTML et

#monBouton {
display:block;
height:100px;
width:100px;
background-image:url(bouton1.gif);
}

pour le CSS.

Tout cela est bien beau, mais nous n'avons pour le moment qu'une image qui ne fait pas de rollover. Nous y venons...
Si l'on considère que le CSS permet à la fois de positionner une image de fond, de masquer une partie du contenu et d'agir au passage de la souris sur un lien, nous concluons qu'il suffit de fusionner les deux images du bouton en une seule, l'une au dessus de l'autre par exemple, et d'utiliser à bon escient ces fonctionnalités pour obtenir notre effet de rollover.
Deux images de 100x100 deviennent ainsi une seule image de 100x200:

bouton1.gif

bouton2.gif

bouton.gif

Il ne reste plus qu'à modifier le CSS pour le bouton en postionnant l'image de fond et masquant le dépassement:

a#monBouton {
display:block;
height:100px;
width:100px;
background:url(bouton.gif) no-repeat 0 0;
overflow:hidden;
}
/* lien survolé: l'image est remontée de 100px */
a#monBouton:hover{
background:url(bouton.gif) no-repeat 0 -100px;
}