Créer un compte
Connexion

Image qui suit la souris en Javascript


Image qui suit la souris en Javascript 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:
Image

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 Précharger des images en javascript et detecter la fin du prechargement [Tutoriel]Cadre sur une image avec GIMP [Tutoriel]Cadre sur une image avec GIMP 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 Image du jour en php sans GD - script une image à chaque jour Image du jour en php sans GD - script une image à chaque jour [GD]Faire un dégradé en php GD - fonction dégradé imagerie [GD]Faire un dégradé en php GD - fonction dégradé imagerie