Image regardant et suivant la souris

Commenter

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

S'inscrire maintenant

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.