Une image réactive en CSS avec une seule image et sans javascript

Ce petit tutoriel simple vous explique comment réaliser un menu codé en xhtml et mis en forme grâce aux css, le menu réagit au passage de la souris pour laisser apparaître une nouvelle image de fond.

L´avantage de la méthode utilisée ici, est de n´utiliser qu´une seule image contenant l´état normal et l´état survolé. Ceci permet de découvrir l´image instantanément après le passage de la souris, l´image étant chargée une bonne fois pour toute dès l´affichage de la page.

Idée originale de la technique présentée ici : http://wellstyled.com/css-nopreload-rollovers.html, cette technique est aussi grandement utilisée par Dave Shea dans son exemple des ? sprites ?, article traduit sur pompage.net.