Problème avec un rollover

Bonjour,

Un ami de la famille ayant récemment créé une entreprise, et ce dernier sachant que je sait créer un site internet à partir de rien, m'a demandé de lui créer un site avec une interface graphique "sympa et animée".

Je décide de faire un menu avec un effet de rollover: au début en tentant de faire un fichier *.swf réagissant au passage de la souris, mais le logiciel que j'ai utilisé (E-anim) ne me fait pas ressortir une animation aussi fluide que les *.gif créés auparavant avec CS5.

après un petit tour sur notre ami google, j'ai trouvé quelque tutos qui montre comment faire un rollover avec 3 images, ce qui me correspondait. j'ai donc utilisé ce petit code en JS imbriqué dans mon en-tête:

<script text="javascript">
<!-- BEGIN
bouton = new Image();
bouton.src = "Index.html_fichiers/img/menu_hover.gif";
bouton_2 = new Image();
bouton_2.src = "Index.html_fichiers/img/menu_hover.gif";
bouton_3 = new Image();
bouton_3.src = "Index.html_fichiers/img/menu_hover.gif";
bouton_4 = new Image();
bouton_4.src = "Index.html_fichiers/img/menu_hover.gif";
END -->
</script>

et à l'emplacement de mon menu dans le corps de la page, j'écris ce code:

<div class="block_index">
<div class="box">
<ul>
<li>
<a href="index.html" onMouseOver="bouton.src = 'Index.html_fichiers/img/menu_hover.gif';" onMouseOut="bouton.src = 'Index.html_fichiers/img/menu.gif';">
<img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" name="bouton">
<img src="Index.html_fichiers/img/acceuil.png" class="img_texte">
</a>
</li>
<li>
<a href="prestations.html" onMouseOver="bouton_2.src = 'Index.html_fichiers/img/menu_hover.gif';" onMouseOut="bouton_2.src = 'Index.html_fichiers/img/menu.gif';">
<img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" name="bouton_2">
<img src="Index.html_fichiers/img/prestations.png" class="img_texte">
</a>
</li>
<li>
<a href="localisation.html" onMouseOver="bouton_3.src = 'Index.html_fichiers/img/menu_hover.gif';" onMouseOut="bouton_3.src = 'Index.html_fichiers/img/menu.gif';">
<img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" name="bouton_3">
<img src="Index.html_fichiers/img/localisation.png" class="img_texte">
</a>
</li>
<li>
<a href="contact.html" onMouseOver="bouton_4.src = 'Index.html_fichiers/img/menu_hover.gif';" onMouseOut="bouton_4.src = 'Index.html_fichiers/img/menu.gif';">
<img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" name="bouton_4">
<img src="Index.html_fichiers/img/contact.png" class="img_texte">
</a>
</li>
</ul>
</div>
</div>

(Ne vous occupez pas des images qui se référencent à la classe img_text, ce n'est pas sur quoi je voudrais que vous attiriez votre attention.)

Ce code est fonctionnel, l'effet de rollover au passage de la souris fonctionne à merveille. Le problème survient au moment du OnMouseOut.

En effet, lorsque la souris est retirée d'un des boutons, les autres boutons réagissent tous au OnMouseOut, ce qui signifie graphiquement que tous les boutons affichent menu.gif.

Il me faudrait donc forcer l'affichage de menu.png, image primaire et non-animée d'un bouton, mais je n'ai pas trouvé comment faire... Pourriez-vous m'aider?

Merci à ceux qui prendront le temps de régler ce petit problème!

ps: le site n'est pas en ligne, mais si vous voulez accéder à l'intégralité de mes sources, n'hésitez pas à me demander.

ps2: l'image menu.png est un dégradé blanc-vert-blanc;
l'image menu_hover est une variation du blanc-vert-blanc vers un blanc-rouge-blanc;
l'image menu.gif est l'animation retour du blanc-rouge-blanc vers un blanc-vert-blanc.