Image qui change au passage de la souris(rollover)

Le 03/04/2009 à 23:04:52
Note: 4/5
Mots clés: Image change passage souris bouton rollover detecter passage onmouseover onmouseout event

Bonjour,
dans ce tutoriel, je vais simplement, vous montrer comment faire une image qui change au passage de la souris sur celle-ci.
pour réaliser ce script, il faut avoir 2 image, une qui vas être affichée normalement et une qui vas être affichée lors du passage de la souris sur la première.
voici les images que l'on vas utiliser:

Voici le code:
image_change_souris.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Image qui change au passage de la souris</title>

    </head>

    <body>

        <img src="image_1.png" alt="Image" onmouseover="javascript:this.src='image_2.png';" onmouseout="javascript:this.src='image_1.png';" />

    </body>

</html>

Essayer

c'est tout! j'espère que vous avez aimé ce tutoriel.
merci

Scripts et Tutoriels similaires

Detecter la position de la souris flash, ActionScript 2 et 3

Modifier le curseur en image ou curseurs proposés en CSS/(X)html

Faire un input file stylé en Css (X)html et Javascript

Image qui suit la souris en Javascript

Précharger des images en javascript et detecter la fin du prechargement