Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné par plein de choses :)

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis

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é :D 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 :D 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 :D

Répondre