On peut facilement à l'aide du javascript modifier une image au passage de la souris en utilisant onmouseover, illustration:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Test MouseOver</title></head><body><img src="lena.png"onmouseover="this.src='lena_edited.png';"onmouseout="this.src='lena.png';"></img></body></html>
Autre exemple: ici l'image est modifiée lorsque la souris passe au dessus d'un lien:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Test MouseOver</title></head><body><script type="text/javascript" language="javascript">function changeImage(img){document.getElementById('bigImage').src=img;}</script><img src="lena.png" id="bigImage" /><br><a onmouseover="changeImage('lena.png')" >Image01</a><a onmouseover="changeImage('lena_edited.png')" >Image02</a></body></html>
Recherches associées
| Liens | Site |
|---|---|
| Change image on hover | stackoverflow |
| onmouseover Event | w3schools |
