Trailing Cursor Bubble Javascript

Below you will learn how to add
Trailing Cursor Bubble Javascripts
to your existing website. We have
used an example of this script as
you can see it here on this page.

Welcome to cursor.com

Google

Trailing Cursor Bubble Script

Rising images from cursor

This Trailing Cursor Javascript makes images rise from your cursor and they grow as they rise.

The example on this page uses a small heart image, but you are only limited in the images you can use by your own imagination. *smiles*

Make your image transparent or use mine. Just right click on the image of your choice on the bottom of the page and save the image to your hard drive.

Copy the script in the text box and paste it into the <body> of your page.

(Homesteaders copy and paste into an "insert html" box and place anywhere on page.)

Upload the image to your server (do not link graphics to hypergurl) and change the url of the image and the image name (3rd line of script) to reflect your image and files. (Homesteaders, don't forget to put files/image.gif.) That is all you need to change within the script.

Tip; To select all the code, click inside the text box and press you keyboards "ctrl +a". To copy, press "ctrl + c" and to paste, press "ctrl + v".

<script language="JavaScript"> //This script supplied by Hypergurl.com //http://www.hypergurl.com Image0=new Image(); Image0.src="http://www.yoursite.com/image.gif"; Amount=20; Ymouse=-50; Xmouse=-50; Ypos=new Array(); Xpos=new Array(); Speed=new Array(); rate=new Array(); grow=new Array(); Step=new Array(); Cstep=new Array(); nsSize=new Array(); ns=(document.layers)?1:0; WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight; (document.layers)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ Ymouse=(document.layers)?evnt.pageY-20:event.y-20; Xmouse=(document.layers)?evnt.pageX:event.x; } (document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse; for (i=0; i < Amount; i++){ Ypos[i]=Math.random()*WinHeight-Ymouse; Xpos[i]=Xmouse; Speed[i]=Math.random()*10+1; Cstep[i]=0; Step[i]=Math.random()*0.1+0.05; grow[i]=4; nsSize[i]=Math.random()*15+5; rate[i]=Math.random()*0.5+0.1; } if (ns){ for (i = 0; i < Amount; i++){ document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>"); } } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++){ document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">'); } document.write('</div></div>'); } function MouseBubbles(){ var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop; var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft; for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(270*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]*5); Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] < -40){ Ypos[i]=Ymouse; Xpos[i]=Xmouse; Speed[i]= 6+Math.random()*3; grow[i]=4; nsSize[i]=Math.random()*15+5; } if (ns){ document.layers['sn'+i].left=Xpos[i]+wscrll; document.layers['sn'+i].top=Ypos[i]+hscrll; } else{ si[i].style.pixelLeft=Xpos[i]+wscrll; si[i].style.pixelTop=Ypos[i]+hscrll; si[i].style.width=grow[i]; si[i].style.height=grow[i]; } grow[i]+=rate[i]; Cstep[i]+=Step[i]; if (grow[i] > 24) grow[i]=25; } setTimeout('MouseBubbles()',10); } MouseBubbles(); //--> </script>