Roll-Over en CSS

Pour éviter les problèmes de post-chargement d'image lors du survol d'un bouton par la souris, les CSS permettent de se servir d'une seule et même image représentant les différents états du bouton.

L'image mise en fond sera positionnée en fonction du résultat attendu.
Cette image est pré-chargée par la Feuille de Style.

Bouton à 3 états en css avec une seule image

Prenons l'exemple d'un menu vertical simple constitué de liens stylés en boites dimensionnées.
Ces liens-boites reçoivent une image de fond (background) représentant le bouton sous différents aspects (3 dans cet exemple).

Suivant l'événement survenu au bouton (survol ou non, clic) l'image de fond est positionnée (glissée) pour montrer une représentation différente du bouton.

L'exemple du menu

Survoler et cliquer les boutons (liens inactifs)

L'image de fond

image des 3 états

Code CSS utilisé

Comme nous n'avons que 3 états, le code de positionnement de l'image est ultra simple.

  1. déclarer l'image de fond : url(boutons/bouton_3_etats_fond.jpg)
  2. positionner l'image de fond : top [ left | center | right ]


left top center top right top


Ce qui nous donne :

Code minimum : a { background: url(boutons/bouton_3_etats_fond.jpg) left top; }
 a:hover { background-position: right top; }
 a:active { background-position: center top; }
Code complet :#menudemo { 
     font-family: geneva,arial,helvetica,verdana;
     width: 160px;
     }
#menudemo a {
     display: block;
     width: 150px; height: 29px;
     margin: 2px;
     text-align: center;
     text-decoration: none; color: white; 
     font-size: 16px; line-height: 29px;
     background: url(boutons/bouton_3_etats_29-150.jpg) left top;
     }
#menudemo a:hover {
     color: white; 
     background-position: right top;
     }
#menudemo a:active {
     color: black; 
     background-position: center top;
     }

Variantes du menu avec la même image

Conclusion ou de l'avantage des CSS

A la suite de cet exemple, on aura bien compris les avantages que nous apportent les CSS pour obtenir, tel qu'on a l'habitude de le rencontrer en JavaScript, des boutons à effets de Roll-Over :

  1. Une seule et unique image pour tous les états du bouton
  2. La même image pour tous les boutons (1 seule image à charger pour tout le menu)
  3. Pas d'attente au 1er survol du bouton
  4. Pas de code (JavaScript) à insérer dans chaque balise de lien
  5. Et surtout, surtout, une gestion aisée du menu puisqu'il ne nécessite que de re-taper la valeur du bouton lors de modifications
  6. De plus, comme l'ensemble est géré par une FdS séparée du code HTML, il est très facile de changer l'apparence du menu.
    • soit, simplement comme dans les 2 variantes
    • soit en changeant la seule et unique image de fond
    • soit en changeant la disposition complete du menu

Bouton à 4 états en css avec une seule image

Dans le même principe, et avec presque la même image, je vous invite à voir un menu à quatre états