Exploding Cursor JavaScript

Below you will learn how to add Exploding
Cursor 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

Exploding Cursor Javascript

This very good cursor effect that has an image circling the cursor which then explodes after a given time. Excellent and unusual trailing cursor for your webpage. The exploding trailing cursor script can be adapted to use your own image if you so desire.

One problem with the script is it doesn't scroll with the page, good for short pages only. When the page is scrolled the viewer will see nothing.

STEP 1

Right click on the image below to download. Save it to your hard drive and then upload it to your server. Place the image into the same folder as your webpage.

You can change the image to your own in the top part of the script. (5th line.)

STEP 2

Copy the code below and paste this into your html document between the <body> and </body> tags.

<script language="JavaScript">
Morph Spin (Image) Script by kurt.grigg@virgin.net -->
Distributed by http://www.hypergurl.com

image=new Image();
image.src='swirl.gif'; //place your image in here if changing.

var ns=(document.layers)?1:0;
var step=1;
var cstep = 0;
var a=0;
var b=100;
var Xpos=0;
var Ypos=0;
var n=7;
var colours=new Array('ffffff','00ff00','aaaaff','ff00ff','ffa500','ff0000','fff000');
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
 Ypos = (document.layers)?evnt.pageY:event.y;
 Xpos = (document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
if (ns){
for (i=0; i < n; i++)
document.write('<LAYER NAME="nsstars'+i+'" TOP=-200 LEFT=0><IMG SRC="'+image.src+'"></LAYER>');
}
else{
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<img src="'+image.src+'" id="iestars" style="position:absolute;top:0px;left:0px;visibility:hidden">');
document.write('</div></div>');
}
function MorphSpin(){
var wdth=(document.layers)?window.innerWidth-100:document.body.clientWidth;
var dot=(document.layers)?document.layers["nsstars"+0]:iestars[0].style;
var vsblty=(document.layers)?'show':'visible';
var nvsblty=(document.layers)?'hide':'hidden';
for (i = 0; i < n; i++){
 dot.visibility=vsblty;
 dot.top=Ypos+a*Math.cos((cstep+i*4.5)/5);
 dot.left=Xpos+a*Math.sin((cstep+i*4.5)/5); 
}
a+=1;
cstep+=step;
setTimeout('MorphSpin()',10);
for (i = 0; i < n; i++){
 var dots=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;
 if (a >= 100){
  a=100;
  step=2.5;
  dots.visibility=vsblty;
  dots.top=Ypos+a*Math.cos((cstep-100)*i/90);
  dots.left=Xpos+a*Math.sin((cstep-100)*i/90);
 }
 if (cstep > 182){
  step=0.5;
  dots.top=Ypos+b*Math.cos(((cstep-182)+i*4.5)/5)*Math.cos((cstep-182)/5);
  dots.left=Xpos+b*Math.sin(((cstep-182)+i*4.5)/5);
 }
}
if (cstep > 210) b-=10;
if (b < -wdth){
for (i = 0; i < n; i++){
(document.layers)?document.layers["nsstars"+i].top=-200:iestars[i].style.top=-200;
}
cstep=0;
step=1;
a=0;
b=100;
}
}
MorphSpin();
//-->
</script>

Copyright 2004, Cursor.com, All Rights Reserved