Créer un compte
Connexion

Image qui change au passage de la souris(rollover)


Image qui change au passage de la souris(rollover) 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:
Image

Image


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 Detecter la position de la souris flash, ActionScript 2 et 3 Modifier le curseur en image ou curseurs proposés en CSS/(X)html Modifier le curseur en image ou curseurs proposés en CSS/(X)html Faire un input file stylé en Css (X)html et Javascript Faire un input file stylé en Css (X)html et Javascript Image qui suit la souris en Javascript Image qui suit la souris en Javascript Précharger des images en javascript et detecter la fin du prechargement Précharger des images en javascript et detecter la fin du prechargement