A:hover et changement d'image[Résolu]

Bonjour,

Voila, j'ai fait un menu qui, quand je passe la souris sur une icone, fait appataitre une autre icone :

.menu1 a
{
display: block ; height:34px;
background: url(image1.gif);
}
.menu1 a:hover
{
background: url(image2.gif) ; 
}

et pour le html :

<td class="menu1">
<a href="page.htm" ></a>
</td>

Tout fonctionne, mais seul truc qui m'embête, c'est qu'au premier chargement de la page, il y a un "blanc" entre le passage de l'image 1 à l'image 2 (qui dure 1 centieme de sec). Par contre, ce soucis ne persiste pas une fois qu'on a deja survolé l'icone avec la souris.
Une idée pour résoudre ce pb ??
Modifié par maryline (13 Oct 2005 - 17:00)

Et non...
Les images se chargent qu'à partir du moment où tu survole...
Soit tu essaie de réduire le poids de tes images, soit tu passe par un preload en javascript !

Ou bien il existe peut-être une bidouille pour pas utiliser de js ?
Modifié par Nigel (13 Oct 2005 - 15:40)

Bonjour maryline

Essais un preload à même le CSS :

.menu1 {
	background: url(image2.gif); /* preload */
}

.menu1 a {
	display: block; height:34px;
	background: url(image1.gif);
}

.menu1 a:hover {
	background: url(image2.gif);
}

j'ai essayé avec cette derniere technique : le truc, c'est que j'ai 6 images.
Ca marche super pour les 4 premières (plus de blanc du tout), par contre, les 2 dernières ne semblent pas être preloadées... c'est bizarre non ?

Elles n'ont peut-être pas eu le temps de charger ?

Toutes mes excuses, c'est moi qui me suis plantée d'url...

Finalement, ca fonctionne très bien.
Merci pour cette astuce !

C'est donc [Résolu] ?