Le rollover, une utilisation de  position: relative

Principe et résultat final de  position: relative

Le rollover est une technique qui permet de changer un élément au survol de la souris. En général il s'agit d'une image qui change de couleur. Deux petits exemples disponibles sur cette page. En-haut le lien de retour vers un accueil (la petite maison change de couleur) et ci-dessous l'affiche d'un film qui se colorise :

Comment fait-on ?

Une solution que l'on trouve sur pas mal de sites réels consiste à mettre une première image en arrière-plan de l'élément et de changer cette image au survol. L'inconvénient majeur : la 2e image n'est pas chargée en même temps que le reste mais uniquement au survol. L'effet sera donc un peu saccadé la première fois.

Etape 1 : on utilise une seule image

Les deux images du rollover ne sont en fait qu'une seule et même image. Ci-dessous l'image de l'affiche de ciné :

Etape 2 : on place l'image dans un conteneur adapté

On place l'image dans un conteneur (div, span, p... peu importe) qui va avoir une largeur égale à la moitié de l'image double :

Etape 3 : par overflow: hidden on masque la zone hors conteneur

Etape finale : faire le décalage

En utilisant un positionnement relatif et un décalage de la bonne distance, on fait apparaître la 2e moitié de l'image au survol de la zone. Voir l'exemple au début de la page.