samedi, avril 07, 2007

Faire Un Roll Over



Grâce à ce script quand la souris passe sur une image, elle est remplacé par une autre, comme vous pouvez le voir avec les bouton en haut de la page. Il sert essentiellement pour faire des boutons de lien mais cela peut etre pour une image toute seul.

"Pourquoi utiliser ce script alors que le link hover est fait pour ca?"
Tout simplement car il permet de precharger la 2eme image. Je reconnais que je n'ai jamais tenté en utilisant le hover mais theoriquement il ne chargera l'image qu'au moment ou la souris passera sur le lien, alors que la l'image est chargé dès le chargement de la page.

Donc le code est en 2 partie, une à placer entre les balise head et lautre pour faire votre bouton.
Voila l'exemple pour 2 boutons:

  • Entre les balises head:
<_script language="Javascript"> <_!-- _home= new Image( ); _home.src="skin/home2.png"; _autres= new Image( ); _autres.src="skin/autres2.png"; //--> <_/script>
  • Pour les liens "home" et "autre":
<_a href="index.html" onmouseover="home.src='skin/punk/home2.png';" onmouseout="home.src='skin/home.png';"> <_img src="skin/home.png" name="home" border="0"> <_/a> <_a href="autres.html" onmouseover="autres.src='skin/autres2.png';" onmouseout="autres.src='skin/autres.png';"> <_img src="skin/autres.png" name="autres" border="0"> <_/a>


Vous pouvez biensur en faire autant que vous voulez en répétant le même model.

/!\ Surtout pensez à enlever les "_" dans les balises, c'est juste pour que le code ne soit pas interprété /!\

Aucun commentaire: