Changer une image au survol de la souris
Voici comment changer une image au survol de la souris comme dans cet exemple :
Ou cet exemple : 
Dans votre éditeur de texte, cliquer sur 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 :
Ajouter un commentaire