[Résolu] Pré-chargement des images survolées

Bonjour,

J'utilise un menu assez classique constitué d'une liste de liens:

<div id="navigation">
	<ul>
		<li><a href="#" id="presentation" title="Présentation" class="current"><span>Présentation</span></a></li>
		<li>...</li>
	</ul>
</div>

Avec le css:

#navigation ul {
	list-style: none;
}

#navigation ul li {
	float: left;
	margin: 0 2px 0 2px;
}

#navigation li a {
	display: block;
	height: 40px;
}

#navigation li a span {
	position: absolute;
	left: -9999px;
}

#navigation li a#presentation {
	width: 112px;
	background-image: url(../medias/nav_1_1.gif);
	background-repeat: no-repeat;
}

#navigation li a#presentation:hover {
	background-image: url(../medias/nav_1_2.gif);
	background-repeat: no-repeat;
}

Le soucis c'est que lors de la première visite sur la page, l'image au survol est affichée un peu en retard, le temps du pré-chargement de celle-ci.

J'ai cherché des solutions et aucune ne me semble vraiment valable.
La première avec javascript (bof bof) :

<script type="text/javascript">
<!--
    img1 = new Image(30,20)
    img1.src = "img1.gif"
    img2 = new Image(30,20)
    img2.src = "img2.gif"
//-->
</script>

La deuxième en css avec un DIV masqué (on ajoute donc du contenu qui ne sert à rien sur la page):

<div id="preload">
<img src="/url/img1.png" />
<img src="/url/img2.png" />
</div>

#preload {
display: none;
}

Avez-vous d'autres méthodes ou astuces? Je pense qu'on doit pouvoir faire plus propre non?

Merci de votre aide!
Modifié par SuD (11 Jan 2007 - 10:18)

Salut!

La méthode des portes coulissantes devrait te convenir, a priori
Modifié par Sopo (11 Jan 2007 - 13:37)

Merci Sopo, c'est nickel, j'y avais pas pensé