Javascript - Rollover sur une image

Afin de rendre certaines pages de votre site plus dynamique, il est possible de modifier une image lors du survol de celle-ci par le curseur de la souris. Pour cela, une adaptation de la fonction swap image sera faite.

Une première image est affichée à l'initialisation de la page web. Lors du survol, cette première photo est remplacée par une deuxième. Lorsque l'internaute ne survole plus l'image, deux choix sont possibles : revenir à la photo initiale ou en afficher une troisième.

Pour ne pas modifier toute la mise en page à l'écran, il est préférable d'utiliser pour cela des images de taille identique.

Code

Dans l'entête du document

<script>

function swap(NouvelleImage) {

fichier=NouvelleImage+".jpg";

document.images[0].src=fichier;

}

</script>

Dans le corps du document

<a href="Fichier_a_charger.htm"

onMouseOver="swap(‘Photo_lors_du_survol')"

onMouseOut="swap(‘Photo_de_sortie')">

<img src="Photo_Initiale.jpg"></a>

Dans le cas où l'on désire revenir à la photo initiale, Photo_de_sortie sera remplacé par Photo_Initiale.
Le Fichier_a_charger ne sera lancé que si l'internaute clique sur la photo.
Il est d'ailleurs possible de ne pas renseigner l'attribut href.

Résultat