Image qui suit la souris en Javascript

Le 11/07/2009 à 05:21:29
Note: 4/5
Mots clés: image qui suit la souris javascript effet image suit curseur en javascript comment mettre une image à côté du curseur compatible tout les navigateurs

Bonjour,
dans ce script, je vais vous montrer comment faire en sorte qu'une image suive la souris en Javascript.
Ce script est compatible avec tout les navigateurs.
Pour réaliser ce script, vous devez d'abord avoir une image, voici l'image utilisée dans ce script:

Voici le code pour qu'un image suit la souris:
image_suit_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 suit la souris</title>

    <script type="text/javascript">

        //<!--

                document.onmousemove = suitsouris;

                function suitsouris(evenement)

                {

                        if(navigator.appName=="Microsoft Internet Explorer")

                        {

                                var x = event.x+document.body.scrollLeft;

                                var y = event.y+document.body.scrollTop;

                        }

                        else

                        {

                                var x =  evenement.pageX;

                                var y =  evenement.pageY;

                        }

                        document.getElementById("image_suit_souris").style.left = (x+1)+'px';

                        document.getElementById("image_suit_souris").style.top  = (y+1)+'px';

                }

        //-->

        </script>

</head>

<body>

        <img src="image.png" alt="Image qui suit la souris" id="image_suit_souris" style="position:absolute;display:block;z-index:5;" />

</body>

</html>

Essayer

c'est tout! j'espère que vous avez aimé ce script et qu'il vous sera utile.
merci

Scripts et Tutoriels similaires

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

[Tutoriel]Cadre sur une image avec GIMP

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

Image du jour en php sans GD - script une image à chaque jour

[GD]Faire un dégradé en php GD - fonction dégradé imagerie