MasterDiz.com The WebMasters Portal  
Home An Image Following the Cursor Visit jsmadeeasy

 

SAMPLE HTML DOCUMENT THIS IS THE SCRIPT (copy and paste in your html document) NOTES
<html>
<head>
<title>
</title>
</head>
<body>

<body bgcolor="#000080" text="#00FFFF" link="#00FF00"
vlink="#FFFF00" onload="if(brOK) setHandlers()"
onunload="if(brOK) {if(tid) clearTimeout(tid);}">

<script>

var brOK=false;
var mie=false;
var ex=0;
var ey=0;
var ae;
var le;
var re;
var x0;
var y0;
var tid;
var realx;
var realy;
var loaded=false;
if(parseInt(navigator.appVersion.charAt(0))>=4)
{brOK=true;}
if(navigator.appName.indexOf("Microsoft")!=-1)
{mie=true; }
function myhandler(e)
{ex=e.pageX;
ey=e.pageY;
moveeye()
return routeEvent(e);
}

function moveeye()
{dy=ey-y0-20;
dx1=ex-x0-20;
dx2=ex-x0-60;

r=Math.sqrt(dx1*dx1+dy*dy);
if(r<20) r=20
dx1=dx1*10/r+x0+10;
dy1=dy*10/r+y0+10;

r=Math.sqrt(dx2*dx2+dy*dy);
if(r<20) r=20
dx2=dx2*10/r+x0+50;

ae.left=x0;
ae.top=y0;
le.left=dx1;
le.top=dy1;
re.left=dx2;
re.top=dy1;
}


function setHandlers()
{if(!mie) {y0=document.eyeballs.top;
x0=document.eyeballs.left;
ae=document.eyeballs;
le=document.lefteye;
re=document.righteye;
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=myhandler;
}
else {y0=document.all.eyeballs.style.pixelTop;
x0=document.all.eyeballs.style.pixelLeft;
ae=document.all.eyeballs.style;
le=document.all.lefteye.style;
re=document.all.righteye.style;
}
realx=x0+0.1;
realy=y0+0.1;

moveall();
loaded=true;
}

function moveall()
{rx=realx+40
ry=realy+40;
rx+=(ex-rx)*0.1;
ry+=(ey-ry)*0.1;
realx=rx-40;
realy=ry-40;
x0=Math.round(realx);
y0=Math.round(realy);
moveeye();
tid=setTimeout('moveall()',100);
}

function placeeyes(x,y)
{if(brOK)
{ex=x+40;
ey=y+40;
s ='<DIV ID="dummy" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:10; height:10;">&nbsp;</DIV>';
s+='<DIV ID="eyeballs" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:80; height:40;" >&nbsp;</DIV>';
s+='<DIV ID="lefteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+10)+'; width:20; height:20;" ><IMG SRC="
BALLOON.GIF" border=0></DIV>';
s+='<DIV ID="righteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+50)+'; width:20; height:20;" >&nbsp;</DIV>';
document.writeln(s);
}
}
</script> <script for="document" event="onmousemove()">
if((mie==true)&&(brOK)&&loaded)
{ex=document.body.scrollLeft+event.x;
ey=document.body.scrollTop+event.y;
moveeye();
}
</script>
<script>
if (document.all||document.layers)
placeeyes(200,100);
</script>


</body>
</html>
<body bgcolor="#000080" text="#00FFFF" link="#00FF00"
vlink="#FFFF00" onload="if(brOK) setHandlers()"
onunload="if(brOK) {if(tid) clearTimeout(tid);}">

<script>

var brOK=false;
var mie=false;
var ex=0;
var ey=0;
var ae;
var le;
var re;
var x0;
var y0;
var tid;
var realx;
var realy;
var loaded=false;
if(parseInt(navigator.appVersion.charAt(0))>=4)
{brOK=true;}
if(navigator.appName.indexOf("Microsoft")!=-1)
{mie=true; }
function myhandler(e)
{ex=e.pageX;
ey=e.pageY;
moveeye()
return routeEvent(e);
}

function moveeye()
{dy=ey-y0-20;
dx1=ex-x0-20;
dx2=ex-x0-60;

r=Math.sqrt(dx1*dx1+dy*dy);
if(r<20) r=20
dx1=dx1*10/r+x0+10;
dy1=dy*10/r+y0+10;

r=Math.sqrt(dx2*dx2+dy*dy);
if(r<20) r=20
dx2=dx2*10/r+x0+50;

ae.left=x0;
ae.top=y0;
le.left=dx1;
le.top=dy1;
re.left=dx2;
re.top=dy1;
}


function setHandlers()
{if(!mie) {y0=document.eyeballs.top;
x0=document.eyeballs.left;
ae=document.eyeballs;
le=document.lefteye;
re=document.righteye;
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=myhandler;
}
else {y0=document.all.eyeballs.style.pixelTop;
x0=document.all.eyeballs.style.pixelLeft;
ae=document.all.eyeballs.style;
le=document.all.lefteye.style;
re=document.all.righteye.style;
}
realx=x0+0.1;
realy=y0+0.1;

moveall();
loaded=true;
}

function moveall()
{rx=realx+40
ry=realy+40;
rx+=(ex-rx)*0.1;
ry+=(ey-ry)*0.1;
realx=rx-40;
realy=ry-40;
x0=Math.round(realx);
y0=Math.round(realy);
moveeye();
tid=setTimeout('moveall()',100);
}

function placeeyes(x,y)
{if(brOK)
{ex=x+40;
ey=y+40;
s ='<DIV ID="dummy" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:10; height:10;">&nbsp;</DIV>';
s+='<DIV ID="eyeballs" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:80; height:40;" >&nbsp;</DIV>';
s+='<DIV ID="lefteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+10)+'; width:20; height:20;" ><IMG SRC="
YOUR IMAGE GOES HERE" border=0></DIV>';
s+='<DIV ID="righteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+50)+'; width:20; height:20;" >&nbsp;</DIV>';
document.writeln(s);
}
}
</script> <script for="document" event="onmousemove()">
if((mie==true)&&(brOK)&&loaded)
{ex=document.body.scrollLeft+event.x;
ey=document.body.scrollTop+event.y;
moveeye();
}
</script>
<script>
if (document.all||document.layers)
placeeyes(200,100);
</script>
Put the script between <body>here</body> The image the you want to follow the cursor put the image file name where it says "YOUR IMAGE GOES HERE" (see the sample html document, the name of my image file is "BALOOM.GIF"); put your image file in the same directory or folder where your html document is.

Disclaimer

Some scripts and images are copyright of their own authors and we don't claim their copyright.