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>
Joint