Les tuto 2 Demolite

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

22 novembre 2010

Image qui suit et regarde le curseur

Posté par Demolite - Dans la catégorie Divers
Tags : , , ,

Ouvrez votre page d'accueil, descendez tout en bas, et juste après la balise </body> collez le script suivant :

Copiez-collez l'adresse de vos images comme indiqué en bleu dans le 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 = "https://p0.storage.canalblog.com/05/09/236987/22738567.gif";

function Bouge_Image()
   {
   if (document.getElementById && anim)
      {
      posX = posX+(((x-posX)+20)/15);
      posY = posY+(((y-posY)+20)/15);
      if(posX<x)
         newpos='https://p7.storage.canalblog.com/76/49/236987/22738281.gif';
      else
         newpos='https://p0.storage.canalblog.com/05/09/236987/22738567.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="https://p7.storage.canalblog.com/76/49/236987/22738281.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
   document.write('</a>');
   document.write('</div>');
   }
</script>


Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici


« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41