Rollover de bouton en CSS

Je suis certain que la plupart d'entre vous vous rappelerez avoir utilisé Dreamweaver pour générer des images rollover en quelques clicks. Vous savez alors que l'éditeur générait du code JavaScript dans la page pour préparer le bon fonctionnement du rollover et qu'il ajoutait un appel d'initialisation dans l'attribut onload de la balise body. Plus précisément, il s'agissait de ce groupe de fonctions :

• MM_swapImgRestore()
• MM_preloadImages()
• MM_findObj()
• MM_swapImage()

Moi, je suis heureux de compter parmi ceux que ça fait des années qui n'ont pas vu ce snippet de code apparaître dans ses projets (j'ai fouillé dans un vieux projet pour copier les noms). Parce que les intégrateurs sont comme les programmeurs : ils privilégient le code simple et clair.

Pour ne pas se casser la tête, le truc est de prendre l'approche CSS, sans même utiliser le JavaScript.

1. Créer une seule image qui comprend plusieurs états

Ici, j'ai juxtaposé verticalement deux états d'images de 16x16 dans une image unique de 16 pixels de large par 32 pixels de haut.

Au niveau du poids du fichier, on peut parfois obtenir un gain :

• connect.png : 748 octets
• disconnect.png : 796 octets
• les 2 combinées en 1 seul fichier : 1,3 ko (0,2 ko en moins)

L'autre avantage est de pouvoir économiser une requête HTTP par image (dans ce cas-ci une seule car il n'y a que deux états mais l'image pourrait en posséder plusieurs. Voir plus bas).

2. HTML

La balise IMG pour un bouton rollover ? OUT! On préférera un lien sur lequel on appliquera une classe. Le texte du lien sera disponible pour le référencement mais on le fera disparaître hors-champ par CSS.

<a class="connect" href="/page.php">Connexion</a>

3. CSS

Du côté de la feuille de style, on définira l'état initial du bouton. Par défaut, un lien possède la propriété d'affichage "inline", on le forcera à être en bloc. On déterminera la zone visible de l'image, soit la pleine largeur (16px) et les 16 premiers pixels en hauteur. Le texte sera repositionné loin à l'extérieur du cadre (petit tour de passe-passe) et on indiquera le chemin de l'image.

.connect{
  display:block;
  width:16px;
  height:16px;
  text-indent: -9999px;
  background:url(/images/connect.png) 0 0 no-repeat;
}

Une fois ces dispositions prises, on peut prendre avantage de la pseudo-classe hover pour indiquer de passer à l'état second en positionnant temporairement la zone visible (16x16) vers le bas. L'état initial sera repris lorsque le curseur ne sera plus au dessus du lien.

.connect:hover{
  background-position: left bottom;
}

C'est nettement une grande amélioration par rapport ce qu'il y avait de disponible à l'époque. Yahoo! est réputé pour utiliser cette technique intensivement, surtout pour minimiser le nombre de requêtes HTTP vers ses icônes (exemple). Sans surprise, Facebook aussi (exemple).