Changer d'image au passage de la souris avec HTML et Javascript

Active 27 mars 2015    /    Viewed 9129    /    Comments 0    /    Edit


On peut facilement à l'aide du javascript modifier une image au passage de la souris en utilisant onmouseover, illustration:

Modifier une image au passage de la souris avec HTML et Javascript

<!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:

Modifier une image au passage de la souris sur un lien avec HTML et Javascript

<!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


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!