BubblesCursor

How to Add a Mousetrail Cursor of Tiny Bubbles

This trailing cursor javascript effect looks to be underwater with bubble images rising from the mouse cursor to the top of the screen. The underwater bubble script is more effective on webpages with a lighter background.

The underwater bubbles cursor is easy to install. Follow the simple instructions below.

STEP 1

Right click on this bubble image. Save the bubble image to your hard drive and upload this to your server. Place the bubble image into the same folder as your html page.

STEP 2

Copy the javascript code below and paste this on the line below the <body> tag of your html document. There is nothing at all to change within the code.

<script

language="JavaScript"> // Under Water Mouse - Kurt Grigg - // http://www.btinternet.com/~kurt.grigg/javascript

<!-- More scripts available at http://www.hypergurl.com n4=(document.layers);

n6=(document.getElementById&&!document.all); ie=(document.all); o6=(navigator.appName.indexOf("Opera")

!= -1)?true:false; img0=new Image(); img0.src="bluebub.gif"; num=(n6)?10:15;

y=0; x=0; if (n4||n6){ window.captureEvents(Event.MOUSEMOVE); function mouse1(e){

y = e.pageY-20-window.pageYOffset; x = e.pageX-4; } if (n4) window.onMouseMove=mouse1;

else document.onmousemove=mouse1; } if (ie||o6){ function mouse2(){ y = (ie)?event.clientY-20:event.clientY-20-window.pageYOffset;

x = event.clientX-4; } document.onmousemove=mouse2; } yp=new Array(); xp=new Array();

sp=new Array(); rt=new Array(); gr=new Array(); s1=new Array(); s2=new Array();

nz=new Array(); wh=(ie)?window.document.body.clientHeight:window.inner Height;

for (i=0; i < num; i++){ yp[i]=Math.random()*wh-y; xp[i]=x; sp[i]= 6+Math.random()*3;

s1[i]=0; s2[i]=Math.random()*0.1+0.05; gr[i]=4; nz[i]=Math.random()*15+5; rt[i]=Math.random()*0.5+0.1;

} if (n4){ for (i=0; i < num; i++){ document.write("<LAYER NAME='bub"+i+"'

LEFT=0 TOP=-50>" +"<img src='bluebub.gif' width="+nz[i]+"

height="+nz[i]+"></LAYER>"); } } if (ie){ document.write('<div

style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < num; i++){ document.write('<img id="bub'+i+'" src="'+img0.src+'"

style="position:absolute;top:-50px;left:0px">'); } document.write('</div></div>');

} if (n6||o6){ for (i=0; i < num; i++){ document.write("<div id='bub"+i+"'

style='position:absolute;top:-50px;left:0px'>" +"<img src="+img0.src+"

width="+nz[i]+" height="+nz[i]+"></div>"); }

} function MouseBubbles(){ scy=(document.all)?document.body.scrollTop:window.page YOffset;

scx=(document.all)?document.body.scrollLeft:window.page XOffset; for (i=0; i <

num; i++){ sy = sp[i]*Math.sin(270*Math.PI/180); sx = sp[i]*Math.cos(s1[i]*5);

yp[i]+=sy; xp[i]+=sx; if (yp[i] < -40){ yp[i]=y; xp[i]=x; sp[i]= 6+Math.random()*3;

gr[i]=4; nz[i]=Math.random()*15+5; } if (n4){ document.layers["bub"+i].left=xp[i]+scx;

document.layers["bub"+i].top=yp[i]+scy; } if (ie){ document.getElementById("bub"+i).style.left=xp[i]+scx;

document.getElementById("bub"+i).style.top=yp[i]+scy; document.getElementById("bub"+i).style.width=gr[i];

document.getElementById("bub"+i).style.height=gr[i]; } if (n6||o6){

document.getElementById("bub"+i).style.left=xp[i]+scx; document.getElementById("bub"+i).style.top=yp[i]+scy;

} gr[i]+=rt[i]; s1[i]+=s2[i]; if (gr[i] > 14) gr[i]=15; } setTimeout('MouseBubbles()',10);

} MouseBubbles(); //--> </script>