Image qui suit la souris en Javascript
ybouane Image qui suit la souris en Javascript Note : 4.9/5 (4 votes) Derniéres modifications : 11/07/2009 à 05:21:29 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 Code: (X)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 tutoriaux similaires à celui ci: 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 [Tutoriel]Mettre une image sur du texte sous photoshop Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Image qui change au passage de la souris(rollover) Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par gagou44 le 14/11/2009 à 12:15:29 bonjours je voulais te dire que tu t ai trompé car quand je mais ce petit code html ce n ai pas une image qui suit la sourit mais "Image qui suit la sourit" Envoyé par ybouane le 18/11/2009 à 04:35:10 Bonjour c'est simplement parce que l'image n'est pas sur ton site/ordinateur, donc puisqu'elle n'est pas trouvée, ton navigateur la remplace par un texte alternatif(entre l'attribut alt="" de l'image) qui est dans ce cas "Image qui suit la sourit" Merci Envoyé par vo+l le 29/12/2009 à 14:49:54 bonjour est t il possible de changer l'image par une animation flash ? merci Envoyé par ybouane le 10/01/2010 à 18:45:09 Bonjour, @vo+l oui, mais il faut ajouter id="image_suit_souris" à l'animation flash Cordialement Envoyé par Yomas le 25/02/2010 à 15:43:44 J'essaye de trouver une solution pour que lorsque l'on cliques sur l'image elle ouvre une url... il y a document.onmousemove = suitsouris; et pourrait on faire document.onClick = openurl; avec function openurl() { } Le pb c'est qu'on ne peut pas approcher de l'image ou difficilemment Pour l'instant j'ai ça comme soluce mais difficile de cliquer sur l'image: <a onclick="javascript:window.open('../index.html')" href="" style="cursor:pointer;"><img src="logo_perso.png" alt="Image qui suit la souris" id="image_suit_souris" style="position:absolute;display:block;z-index:5;" /></a> Une idée? ^^ Merci d'avance !! Envoyé par Darkikiki le 10/04/2010 à 11:00:31 Bonjour, J'ai trouvé ton code très intéressant, mais je voudrais savoir quelque chose: J'ai plusieurs frames sur mon site. Du coup l'image n'apparait que dans le frame où j'ai mis le code. Y-a-t-il un moyen pour que l'image suive partout la souris, peut importe l'endroit, et sans coupure? (Sans coupure = sans devoir mettre dans chaque frame le code, car dans ce cas j'aurais au final plusieurs fois l'image dans le même site) Merci d'avance. Darkikiki Envoyé par karimou-mhamdia le 04/10/2010 à 00:05:44 c bien Envoyé par didouchy le 26/11/2010 à 14:44:53 2h15 de recherche pour un petit bidul pareil lol. Merci infiniment pour ce tutoriel. Je mettrai l'une de tes bannière que tu propose sur mon site :) Envoyé par wador le 05/05/2011 à 12:13:35 C'est sympatique ! Merci pour le code =) Envoyé par Di_han le 31/05/2011 à 14:56:37 Code pratique car il marche sous tous les navigateurs =) Bien sympathique, merci beaucoup! Envoyé par sacha le 18/08/2011 à 12:05:59 c dar Envoyé par Pronto le 22/08/2011 à 23:18:34 Je ne doit pas savoir faire.Je mets une image sur mon site,en html,je colle. cordialement. Débutant Envoyé par Firma le 11/10/2011 à 12:52:35 Bonjour j'ai un problème quand je met le code html sur une page html sa me fait sa : Un cadre qui suit la souris comment faire ?! Cordialement Firma Envoyé par Zahako le 03/11/2011 à 20:08:10 Bonjour, Assez novice dans les code j'ai essayer d'intégrer le code proposer mais j'ai un soucis que je n'arrive pas à résoudre. L'image est décalé de presque 20cm sur la gauche de la souris (elle n'est pas à côté du pointeur). Que faudrait-il changer dans le code pour que l'image colle au pointeur de la souris, Merci Envoyé par uj le 22/12/2011 à 15:53:12 bof tro gro Envoyé par lila le 22/12/2011 à 20:26:55 Oué Bof, trop gros vous pourvez pas en faire un qui bouge et plus beau parce que lui il est a chier Envoyé par nemo le 03/01/2012 à 18:46:22 waw, c'est très bien réussi ;) Envoyé par nono-gangsta le 05/01/2012 à 16:28:55 Mdr Lila, c'est à toi de mettre une image dans <img src="mets_ton_image_ici_lila.png" alt="image_de_lila" /> Envoyé par skvbcdnn le 24/01/2012 à 12:30:02 20

Image qui suit la souris en Javascript

ybouane

Image qui suit la souris en Javascript
Note : 4.9/5 (4 votes)
Derniéres modifications : 11/07/2009 à 05:21:29
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

Code: (X)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 tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par gagou44 le 14/11/2009 à 12:15:29

bonjours
je voulais te dire que tu t ai trompé car quand je mais ce petit code html ce n ai pas une image qui suit la sourit mais
"Image qui suit la sourit"

Envoyé par ybouane le 18/11/2009 à 04:35:10

Bonjour
c'est simplement parce que l'image n'est pas sur ton site/ordinateur, donc puisqu'elle n'est pas trouvée, ton navigateur la remplace par un texte alternatif(entre l'attribut alt="" de l'image) qui est dans ce cas "Image qui suit la sourit"

Merci

Envoyé par vo+l le 29/12/2009 à 14:49:54

bonjour
est t il possible de changer l'image par une animation flash ?
merci

Envoyé par ybouane le 10/01/2010 à 18:45:09

Bonjour,
@vo+l oui, mais il faut ajouter id="image_suit_souris" à l'animation flash

Cordialement

Envoyé par Yomas le 25/02/2010 à 15:43:44

J'essaye de trouver une solution pour que lorsque l'on cliques sur l'image elle ouvre une url...
il y a
document.onmousemove = suitsouris;
et pourrait on faire
document.onClick = openurl;
avec
function openurl()
{

}
Le pb c'est qu'on ne peut pas approcher de l'image ou difficilemment

Pour l'instant j'ai ça comme soluce mais difficile de cliquer sur l'image:

<a onclick="javascript:window.open('../index.html')" href="" style="cursor:pointer;"><img src="logo_perso.png" alt="Image qui suit la souris" id="image_suit_souris" style="position:absolute;display:block;z-index:5;" /></a>

Une idée? ^^
Merci d'avance !!

Envoyé par Darkikiki le 10/04/2010 à 11:00:31

Bonjour,

J'ai trouvé ton code très intéressant, mais je voudrais savoir quelque chose:
J'ai plusieurs frames sur mon site. Du coup l'image n'apparait que dans le frame où j'ai mis le code.

Y-a-t-il un moyen pour que l'image suive partout la souris, peut importe l'endroit, et sans coupure? (Sans coupure = sans devoir mettre dans chaque frame le code, car dans ce cas j'aurais au final plusieurs fois l'image dans le même site)

Merci d'avance.
Darkikiki

Envoyé par karimou-mhamdia le 04/10/2010 à 00:05:44

c bien

Envoyé par didouchy le 26/11/2010 à 14:44:53

2h15 de recherche pour un petit bidul pareil lol.

Merci infiniment pour ce tutoriel. Je mettrai l'une de tes bannière que tu propose sur mon site :)

Envoyé par wador le 05/05/2011 à 12:13:35

C'est sympatique ! Merci pour le code =)

Envoyé par Di_han le 31/05/2011 à 14:56:37

Code pratique car il marche sous tous les navigateurs =) Bien sympathique, merci beaucoup!

Envoyé par sacha le 18/08/2011 à 12:05:59

c dar

Envoyé par Pronto le 22/08/2011 à 23:18:34

Je ne doit pas savoir faire.Je mets une image sur mon site,en html,je colle. cordialement. Débutant

Envoyé par Firma le 11/10/2011 à 12:52:35

Bonjour j'ai un problème quand je met le code html sur une page html sa me fait sa :

Un cadre qui suit la souris comment faire ?!

Cordialement Firma

Envoyé par Zahako le 03/11/2011 à 20:08:10

Bonjour,
Assez novice dans les code j'ai essayer d'intégrer le code proposer mais j'ai un soucis que je n'arrive pas à résoudre.
L'image est décalé de presque 20cm sur la gauche de la souris (elle n'est pas à côté du pointeur).
Que faudrait-il changer dans le code pour que l'image colle au pointeur de la souris, Merci

Envoyé par uj le 22/12/2011 à 15:53:12

bof tro gro

Envoyé par lila le 22/12/2011 à 20:26:55

Oué Bof, trop gros vous pourvez pas en faire un qui bouge et plus beau parce que lui il est a chier

Envoyé par nemo le 03/01/2012 à 18:46:22

waw, c'est très bien réussi ;)

Envoyé par nono-gangsta le 05/01/2012 à 16:28:55

Mdr Lila, c'est à toi de mettre une image dans <img src="mets_ton_image_ici_lila.png" alt="image_de_lila" />

Envoyé par skvbcdnn le 24/01/2012 à 12:30:02