Problème avec hover et chargement de gif animé

Bonjour,

Je suis Nocnoc, webmaster amateur, nouveau sur alsacréation.

J'ai un problème de compréhension avec hover et des gifs animé.
J'ai un menu composé d'image. Quand je survole l'image, je veux afficher un gif animé sans boucle (càd une petite anim et retour à l'image d'origine).

Voici le html:

	
<ul id="menu">
    <li id="accueil"><a href="onglet-1.html"></a></li>
</ul>

Voici la feuille de style correspondante:

#accueil a {
  display: block;
  height: 30px;
  width: 160px;
  background: url(img/accueil.png);
}

#accueil a:hover {
  background: url(img/accueilhover.gif);
}

Dans un premier temps, ça marchait très bien mais j'ai voulu peaufiner.
En effet, au premier chargement, il y a un flickering gênant car le gif n'est pas chargé.

J'ai donc tenté de précharger l'image de la façon suivante:

<img src="img/accueilhover.gif" style="display:none" alt="">

Ca marche bien pour le chargement mais quand je procède au survol, j'affiche l'image mise en cache qui correspond au dernier frame du gif.

Or, si je ne fais pas de préload, je constate bien que mon gif est également dans le cache de IE7 (et il est bien réexécutué à chaque survol). On dirait que l'image cachée par <img> est différente de celle caché par HOVER.

Mes questions sont les suivantes:

Pourquoi mon gif animé s'affiche quand je n'ai pas de préload et ne s'affiche pas quand j'ai un preload sachant que dans les 2 cas, je vois mon gif dans le cache (temporary internet file)?

Y a-t-il un moyen de faire mon menu sans flickering? Càd avec preload et réexécution de la séquence du gif à chaque survol?

J'espère avoir été clair et vous remercie d'avance pour votre aide.

Bonjour Nocnoc

AlsacreationS

Tes images ne devraient pas se trouver dans ta feuille de styles (à mettre dans le (x)html via la balise img avec l'attribut alt qui va bien) et tes liens ne devraient pas être vide (perte d'accessibilité pour différentes raisons) re-

Il faudrait donc corriger tout cela, puis faire le changement et le preload d'images via javascript

Dans un style différent (avec une image purement décorative et l'intitulé des liens en dur dans le code html ) et pour "exemple" tu pourras regarder le menu du site allhtml

Cdt,
Sylvain

Ok. Merci pour ces conseils. Je vais me pencher sur le sujet mais ça risque de prendre du temps car je pars en vacances ds quelques heures.
a+