lundi 10 novembre 2008

Mettre une image qui suit et regarde le curseur : Sur demande de plusieurs bloggeurs

Comment mettre une image qui suit et regarde le curseur comme dans ce message ?

EN MODE AVANCE ET IMPOSSIBLE DANS LES BLOGS SPACES MSN

Dans "apparence" allez dans "Page d'accueil" et collez le code ci-dessous, tout en bas juste avant </body></html>

Mettez vos gifs animés à la place des miens en rouge et vert, le rouge est le gif qui regarde vers la droite et en vert est le gif qui regarde vers la gauche. (Ici c'est Titi, vous pouvez aussi bien utiliser les miens)

"Validez" et allez voir votre accueil. Si vous voulez avoir le même effet sur tout vos message du blog, il vous suffit de refaire la même chose dans "Page des archives", "Page de l'index des archives" et dans "Page d'un message" ;-)

LE CODE A INSERER :

<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
/*
Image qui suit et regarde la souris
http://www.editeurjavascript.com/scripts/scripts_images_1_66.php
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
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 = "http://storage.canalblog.com/83/23/144645/32318848.gif";

function Bouge_Image()
   {
   if (document.getElementById && anim)
      {
      posX = posX+(((x-posX)+20)/15);
      posY = posY+(((y-posY)+20)/15);
      if(posX<x)
         newpos='http://storage.canalblog.com/49/69/144645/32318813.gif';
      else
         newpos='http://storage.canalblog.com/83/23/144645/32318848.gif';
   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="http://storage.canalblog.com/49/69/144645/32318813.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
   document.write('</a>');
   document.write('</div>');
   }
</script>
<!-- FIN DU SCRIPT -->

Bon amusement !