Changer une Image au passage de la souris

Publié le 24 janvier 2006 par Framboise

Rien de plus simple que d'afficher une image différente lors du passage de la souris sur une de vos images.

Je vous explique comment j'ai procédé pour changer l'image de ma banière.

Il vous faut tout d'abord DEUX IMAGES de dimensions STRICTEMENT IDENTIQUES
(si ce n'est pas le cas, vous aurez un résultat très .... "sautillant" du plus mauvais effet )

Par exemple : image 1

Par exemple : image 2

Vous allez placer les commandes suivantes dans le module (ou l'article) dans lequel vous souhaitez placer votre image :

- il vous faut passer en MODE SOURCE,
- il vous faut rentrer ces lignes :

<a
(pour commencer)

href="http://framboiserando.over-blog.com"
(ici le lien lorsque l'on fera un click sur l'image)

onmouseout=
"document.photo.src='http://idata.over-blog.com/0/16/31/99/banierecouleur-1.jpg'"
(ici le chemin d'accés à l'image qui sera affichée en temps normal)

onmouseover=
"document.photo.src='http://idata.over-blog.com/0/16/31/99/banieregris-1.jpg'">
(ici le chemin d'accès à l'image qui sera affichée au passage de la souris)

<img border="1" alt="" style="border: medium dotted orange;
(ici pour pouvez si vous le souhaitez définir une couleur, un type, une taille de bordure)

" name="photo" src="http://idata.over-blog.com/0/16/31/99/banierecouleur-1.jpg"
(ici encore le chemin d'accès à l'image qui sera affichée en temps normal)

class="CtreTexte" classname="CtreTexte" />
(ici vous pouvez préciser le mode d'alignement de votre image)

</a>
(pour terminer)

et toujours : pensez à faire CTRL + F5 pour voir le résultat !