Changer une image au survol de la souris

Voici comment changer une image au survol de la souris comme dans cet exemple :

Survol

 

Ou cet exemple :  Survol

 

Dans votre éditeur de texte, cliquer sur Editeur HTML Editeur html puis insérer ce code :

<img src="URL de la 1ère image"
onmouseover="this.src='URL de la 2e image';"
onmouseout="this.src='URL de la 1ère image';">
</img>

 

Remplace les URL des images par les votres.
Vous obtiendrez un code comme celui ci :

 

<p><img alt="Survol" height="198" onmouseout="this.src='http://www.tutoriel.net/medias/images/voir-le-tutoriel-gris.png';" onmouseover="this.src='http://www.tutoriel.net/medias/images/voir-le-tutoriel.png';" src="http://www.tutoriel.net/medias/images/voir-le-tutoriel-gris.png" /><br /></p>

 

 Explications :

onmouseout : url de la 1ère image = C'est l'image de base avant le passage de la souris.
onmouseover : url de la 2ème image = C'est l'image qui apparaît au passage de la souris.
src : URL de la 1ère image = C'est l'image qu'il y aura après le passage de la souris.

  Mettre un lien sur vos images :

<p><a href="www.VotreLien.fr" target="_blank"><img alt="Survol"  onmouseout="this.src='URL de la 1ère image';" onmouseover="this.src='URL de la 2ème image';" src="URL de la 1ère image" /></a></p>


Exemple :

Survol

Retour   Accueil   

Ajouter un commentaire