C’est très agréable de passer sa souris sur un menu avec des images et de les voir changer au moment où on passe dessus. Mais souvent il faut attendre un cours instant (comme sur le site avec les grands titres du menu de gauche) pour voir s’afficher l’autre image (celle du rollover). Ceci est généré en javascript via la directive onmouseover / onmouseout, couplé à deux images différentes. Sur les grosses connexions cela passe mais sur les petites on attends souvent un petit moment avant de voir l’image du rollover.
Et bien voila un petit tuto qui vous fait tout ça avec une seule image et en css uniquement. Plus de javascript puisque le changement s’opère grâce au survol de la balise a. Le résultat est bluffant et l’affichage au passage de la souris est instantané.