Image regardant et suivant la souris

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 881 fois - Téléchargée 19 fois

Contenu du snippet

C'est une image une sorte de tête qui suit la souris et qui la regarde, par exemple, vous dirigez la souris à gauche de l'image elle regarde vers la gauche et vis versa. Voici la page où vous pourrez retrouver la démonstration: http://foot-abder.ifrance.com/demo_code_script.html

Source / Exemple :


<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
var x = 0;
var y = 0;

if (document.getElementById)
   {
   if(navigator.appName.substring(0,3) == "Net")
      document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = Pos_Souris;
   window.onload = Bouge_Image;
   }

function Pos_Souris(e)
   {
   x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
   y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
   }

posX = 0;
posY = 0;
anim = true;
oldpos = "Entrez ici le chemin de l'image qui regarde vers la gauche";

function Bouge_Image()
   {
   if (document.getElementById && anim)
      {
      posX = posX+(((x-posX)+20)/15);
      posY = posY+(((y-posY)+20)/15);
      if(posX<x)
         newpos='Entrez ici le chemin de l'image qui regarde vers la droite';
      else
         newpos='Entrez ici le chemin de l'image qui regarde vers la gauche';
	  if(newpos!=oldpos)
	  	{
		document.tete.src=newpos;
		oldpos=newpos;
		}
      document.getElementById("teteronde").style.top = posY+"px";
      document.getElementById("teteronde").style.left = posX+"px";
      tempo = setTimeout("Bouge_Image()", 15)
      }
   }

if(document.getElementById)
   {
   document.write('<div id="teteronde" style="position: absolute">');
   document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
   document.write('<img src="Entrez ici le chemin de l'image qui regarde vers la droite" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
   document.write('</a>');
   document.write('</div>');
   }
</script>
<!-- FIN DU SCRIPT -->

Conclusion :


Je trouve que c'est un script amusant et j'espere que vous aimerez.

A voir également

Ajouter un commentaire

Commentaires

Palleas_44
Messages postés
131
Date d'inscription
lundi 12 décembre 2005
Statut
Membre
Dernière intervention
19 avril 2009

L'idée est amusante mais j'aurai opté pour une utilisation du DOM plutot qu'utiliser document.write(). Ta condition document.getElementById devrait avoir un else quand même, que le script soit plus compatible, même chose pour recuperer la position de la souris et puis je crois que c'est tout ;)
dlafrette
Messages postés
1
Date d'inscription
samedi 12 février 2005
Statut
Membre
Dernière intervention
12 février 2007

Ne fonctionne que sous IE et non sous Firefox! Dommage car c'est effectivement amusant. Bon courage.
abder05
Messages postés
7
Date d'inscription
dimanche 4 février 2007
Statut
Membre
Dernière intervention
12 février 2007

Si ça marche sous Firefox. Justement j'ai les deux navigateurs et ça marche sur les IE et Firefox, t'as quelle version? Moi j'ai 1.5
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
Bonjour,
cela marche même sous FireFox à condition de lignes 32, 34 et 50 il faut mettre un \ devant 'image.
;0)
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
Re Bonjour,
Il me semblait que cela me disait quelquechose...

Et bien OUI, une recherche sur Google donne pas moins de 168 réponses avec le mot clé document.getElementById("teteronde") dont une issue de http://www.editeurjavascript.com/ avec un code déposé en 2003 qui est déjà une reprise d'un exemple d'un ouvrage de MicroApplication de 2001 en e-Poche, à la ligne près.

La source restant une bonne source, je suis seulement désolé qu'aucune mention d'antériorité n'apparaîssent.

:0(

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.