Vous êtes ici: Accueil / Informatique / Site Web / Astuce CSS / Menu CSS

menu via le css

Cette astuce concerne les menus avec plusieurs fonds d'image déclarés dans le CSS.

Constatation

Voila, quand l'internaute charge pour la première fois votre page, il n'a pas encore sur son ordinateur toutes les différentes images de votre site. En effet, les images du menu ne sont pas encore toutes chargées, Il manque les images que vous avez déclarer dans votre CSS par exemple a:hover

Remède

Pour être certain que les images sont bien chargées, vous allez les déclarer dans HTML en mode invisible juste après la balise <body>. Vous allez pré-charger les images.

Exemple:

<body>
<!-- pré-chargement invisible des images de survol -->
<img src="Images1" alt="" width="100" height="10" style="display:none"/>
<img src="Images2" alt="" width="100" height="10" style="display:none"/>
<img src="Images3" alt="" width="100" height="10" style="display:none"/>
... <!-- Fin du pré-chargement invisible des images de survol -->
... </body>

Remplacer Images(n) par son chemin complet: (Ex: ../../Images/Menu_R.png)