Ouvrir la navigation secondaire

Ce billet a plus de deux ans. S'il contient des informations techniques elles sont peut être obsolètes.

Précédent Viva la nouvelle version
Suivant ColorWrite 1.1

Rollovers d'images en CSS

Joli tuyau trouvé sur le site de Zeldman pour preloader l'état hover d'une image qui servira à... un rollover d'image ! Il y a toujours les astuces du site wpdfd mais je les trouve moins élégantes. Voila dans les grandes lignes la méthode vue sur Zeldman.com :

1 Utiliser un élément qui servira de conteneur et lui donner l'état dessus de l'image en tant que background :

#conteneur{ background: url(menu01_dessus.gif) no-repeat; }

2 Utiliser un élément qui sera contenu dans l'élément précédent et lui affecter l'état normal de l'image en tant que background, par exemple :

a.menu01 {
    background: url(menu01.gif) no-repeat;
    width:  400px;
    height: 24px;
    display: block;
}

3 Utiliser encore une fois l'état dessus de l'image en tant que background de la pseudo-classe a:hover :

a.menu01:hover {
    background: url(menu01_dessus.gif) no-repeat;
    width:  400px;
    height: 24px;
    display: block;
}

Donc l'élément conteneur va servir à faire preloader l'état dessus de l'image pendant le chargement de la page. Petite astuce : en spécifiant une couleur de fond pour les éléments contenus dans conteneur (ici a.menu01 et a.menu01:hover), on est certain de masquer l'image de fond de conteneur. En simplifiant, on obtient ça dans le code de la page :

<div id="conteneur">
<a class="menu01" href="#"></a>
</div>