Download JavaScript Code Examples, Tutorials, Reference

Provide thousands of free JavaScript code examples, DHTML, HTML JavaScript Tutorials, Reference and Help. JavaScriptBank.com is the best JavaScript resources

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com Move your mouse around, please!

Instructions:

1: Create several "GIF" images with transparent backgrounds. Make each picture contain a piece of the final image so when the images are laid on top of each other, they look like one image.

2: Copy and paste the following javascript at the end of the BODY section of your page:
Select all...

// ENTER YOUR PICTURE NAMES BELOW. REMEMBER TO ADD COMMAS BETWEEN EACH ONE.

var imgurls=[ 'p1.gif' , 'p2.gif' , 'p3.gif' , 'p4.gif' , 'p5.gif' , 'p6.gif' ];

var delay=80;      // SPEED OF TRAIL
var Xoff=20;       // AMOUNT OF PIXELS TO THE RIGHT IMAGE WILL BE AWAY FROM CURSOR (- VALUES GO TO LEFT)
var Yoff=20;       // AMOUNT OF PIXELS TO THE BOTTOM IMAGE WILL BE AWAY FROM CURSOR (- VALUES GO UP)
var imgw=60;       // IMAGE WIDTH 
var imgh=60;       // IMAGE HEIGHT

//////////////// NO NEED TO EDIT BEYOND THIS POINT \\\\\\\\\\\\\\\

var ns4=(document.layers)?true:false;
var ns6=(document.getElementById&&navigator.appName.indexOf("Netscape")>=0)?true:false;
var ie4=(document.all&&!document.getElementById)?true:false;
var ie5=(document.all&&document.getElementById)?true:false;
var mImgs=new Array();
var x1=0;
var y1=0;
var t='';
for(i=0;i<imgurls.length;i++){
t+=(ns4)?'<layer name="img'+i+'" top="0" left="0" width="'+imgw+'" height="'+imgh+'">':'<div id="img'+i+'" style="position:absolute; top:0px; left:0px; width:'+imgw+'px; height:'+imgh+'px; visibility:visible">';
t+='<img src="'+imgurls[i]+'" width="'+imgw+'" height="'+imgh+'">';
t+=(ns4)?'</layer>':'</div>';
}
document.write(t);

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x;
id.style.top=y;
}}

function moveimgs(){
for(i=imgurls.length-1;i>0;i--)moveid(mImgs[i], getidleft(mImgs[i-1]), getidtop(mImgs[i-1]));
moveid(mImgs[0],x1,y1);
}

window.onload=function(){
  for(i=0;i<imgurls.length;i++)mImgs[i]=(ns4)?document.layers['img'+i]:(ie4)?document.all['img'+i]:document.getElementById('img'+i);
  if(ns4)document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove=animate;
  setInterval('moveimgs()',delay);
}
</script>

3: In the script, edit the image URLs and the various settings.