1/2 #Rollover – Comment faire un menu rollover en Javascript

Je vais publier un bout de script qui pourra peut être servir à quelqu’un. Une chose est sûre, c’est que ce code, écrit il y a quelques années, est totalement dépassé Mais, ça peut toujours servir pour une base ou quelque chose.

Le but était de faire un menu rollover (l’image change au survol).  L’intérêt de celui-ci, c’est qu’il est en javascript, et mal codé… euh Si une personne a désactivé l’exécution du javascript, elle ne verra pas l’effet. L’intérêt, par contre, c’est qu’il tient en 6 lignes de code.

Pour commencer, il vous faut deux images, une classique, l’autre pour le survol. L’astuce est de nommer l’image pour le survol avec un « _roll » après le nom. Dans notre cas, on a celles-ci :

	bouton2.gif
	bouton2_roll.gif
	bouton2.gif
	bouton3_roll.gif
Et ainsi de suite…

Le code javascript qui sera appelé à chaque survol d’une image du menu :

<script language="javascript" type="text/javascript">
function roll(id) {
var d = document.getElementById(id);
 for (var i = 1; i<=10; i++) {
  if (document.getElementById('bouton'+i)) {document.getElementById('bouton'+i).src='./img/bouton'+i+'.gif';}
 }
if (d) {d.src='./img/'+id+'_roll.gif';}
}
</script>

Le code HTML pour le menu :

<img id="bouton2" onmouseover="javascript:roll(this.id);" src="./img/bouton2.gif" border="0" alt="" />
<img id="bouton3" onmouseover="javascript:roll(this.id);" src="./img/bouton3.gif" border="0" alt="" />
<img id="bouton4" onmouseover="javascript:roll(this.id);" src="./img/bouton4.gif" border="0" alt="" />

Voilà, le menu rollover est maintenant actif. Une live démo est dispo là : http://www.arnaudbosquet.fr/tutos/roll_javascript/

Bon, j’ai écrit ce code il y a 3 ans. Il n’est donc pas très optimisé.
On peut faire un menu rollover beaucoup plus complet uniquement en CSS mais ça sera dans le prochain article