Image Stays by Follows

[Total: 0    Average: 0/5]

This example shows how to have an image follow the cursor.

Head Code:

<script language="JavaScript" type="text/javascript">
<!--

var zxcImg1,zxcImg2,zxcMseX,zxcMseY,zxcTO;


function zxcMse(event){
 if(!event) var event=window.event;
 if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
 else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
 clearTimeout(zxcTO);
 zxcImg2.style.left=(zxcMseX-zxcImg2.offsetWidth/2)+'px';
 zxcImg2.style.top=(zxcMseY-zxcImg2.offsetHeight/2)+'px';
 zxcImg2.style.visibility='visible';

}

function zxcCheckPos(){
 zxcTO=setTimeout('zxcPosition()',200);
}

function zxcPosition(){
 if (!zxcMseX){ return; }
 zxcImg1.style.left=(zxcMseX-zxcImg1.offsetWidth/2)+'px';
 zxcImg1.style.top=(zxcMseY-zxcImg1.offsetHeight/2)+'px';
 zxcImg1.style.visibility='visible';
 zxcImg2.style.visibility='hidden';
}

window.onload=function(){
 zxcImg1=document.getElementById('Img1');
 zxcImg2=document.getElementById('Img2');
 setInterval('zxcCheckPos()',500);
 document.onmousemove=function(event){ zxcMse(event); }
}


//-->
</script>

Body Code:

<img id="Img1" src="http://www.js-examples.com/images/blue_ball0.gif" width="50" height="50" style="position:absolute;visibility:hidden;" >
<img id="Img2" src="http://www.js-examples.com/images/red_ball0.gif" width="50" height="50" style="position:absolute;visibility:hidden;" >

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *