Membuat Pointers / Mouse Bergambar Pada Web

<script language="javascript">

var numberimgs=5; // JUMLAH TOTAL GAMBARAN UNTUK MENGIKUTI MOUSE CURCOR

var begW=121; // MULAI LEBAR GAMBAR

var endW=121; // AKHIR LEBAR GAMBAR

var begH=65; // MULAI TINGGI GAMBAR

var endH=65; // AKHIR TINGGI GAMBAR

var imgurl='ciat.gif'; // NAMA GAMBAR. DISESUAIKAN ALAMAR URL

var delay=60; // KECEPATAN JALAN

var Xoff=+20; // JUMLAH PIXELS DI SEBELAH KANAN GAMBARAN AKAN JADI MENJAUH DARI CURSOR(- NILAI-NILAI PERGI UNTUK NINGGALKAN)

var Yoff=+30; // JUMLAH PIXELS KEPADA GAMBARAN ALAS/PANTAT AKAN JADI MENJAUH DARI CURSOR(- NILAI-NILAI NAIK/MAJU)

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 stepH=(begH-endH)/numberimgs;

var stepW=(begW-endW)/numberimgs;

var xcoord=new Array();

var ycoord=new Array();

for(i=0;i<=numberimgs;i++){ xcoord[i]=0; ycoord[i]=0; }

var mImgs=new Array();

var t='';

for(i=1;i<=numberimgs;i++){

t+=(ns4)?'<layer name="img'+i+'" top="0" left="0" width="'+(begW-(i*stepW-stepW))+'" height="'+(begH-(i*stepH-stepH))+'" z-index="'+(numberimgs-i)+'" visibility="show">':'<div id="img'+i+'" style="position:absolute; top:0px; left:0px; width:'+(begW-(i*stepW-stepW))+'px; height:'+(begH-(i*stepH-stepH))+'px;z-index:'+(numberimgs-i)+'; visibility:visible">';

t+='<img src="'+imgurl+'" width="'+(begW-(i*stepW-stepW))+'" height="'+(begH-(i*stepH-stepH))+'">';

t+=(ns4)?'</layer>':'</div>';

}

document.write(t);

function getmousecoord(evt){

xcoord[1]=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);

ycoord[1]=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);

if(!ns6)moveid(mImgs[1], xcoord[1], ycoord[1]);

}

function moveid(id,x,y){

if(ns4)id.moveTo(x,y);

else{

id.style.left=x;

id.style.top=y;

}}

function moveimgs(){

for(i=numberimgs;i>1;i=i-1){

xcoord[i]=xcoord[i-1]+stepW/2;

ycoord[i]=ycoord[i-1]+stepH/2;

}

for(i=2;i<=numberimgs;i++)moveid(mImgs[i], xcoord[i], ycoord[i]);

}

window.onload=function(){

for(i=1;i<=numberimgs;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=getmousecoord;

if(ns6)setInterval('moveid(mImgs[1],xcoord[1],ycoord[1])',10);

setInterval('moveimgs()',delay);

}

</script>

Tweet