Now that all the uploading is done, here is the code...
Code:
<A HREF="#" onClick="myFW1.stop();myFW2.stop();myFW3.stop();myFW4.stop();return false;">STOP</A>
<A HREF="#" onClick="myFW1.start();myFW2.start();myFW3.start();myFW4.start();return false;">START</A>
<SCRIPT TYPE="text/javascript">
/**
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Cross Browser Fireworks from
www.javascript-fx.com*/
/*************************************************/
if(!window.JSFX) JSFX=new Object();
if(!JSFX.createLayer)
{/*** Include Library Code ***/
var ns4 = document.layers;
var ie4 = document.all;
JSFX.objNo=0;
JSFX.getObjId = function(){return "JSFX_obj" + JSFX.objNo++;};
JSFX.createLayer = function(theHtml)
{
var layerId = JSFX.getObjId();
document.write(ns4 ? "<LAYER NAME='"+layerId+"'>"+theHtml+"</LAYER>" :
"<DIV id='"+layerId+"' style='position:absolute'>"+theHtml+"</DIV>" );
var el = document.getElementById ? document.getElementById(layerId) :
document.all ? document.all[layerId] :
document.layers[layerId];
if(ns4)
el.style=el;
return el;
}
JSFX.fxLayer = function(theHtml)
{
if(theHtml == null) return;
this.el = JSFX.createLayer(theHtml);
}
var proto = JSFX.fxLayer.prototype
proto.moveTo = function(x,y){this.el.style.left = x;this.el.style.top=y;}
proto.setBgColor = function(color) { this.el.style.backgroundColor = color; }
proto.clip = function(x1,y1, x2,y2){ this.el.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4){
proto.clip = function(x1,y1, x2,y2){
this.el.style.clip.top =y1;this.el.style.clip.left =x1;
this.el.style.clip.bottom=y2;this.el.style.clip.right =x2;
}
proto.setBgColor=function(color) { this.el.bgColor = color; }
}
if(window.opera)
proto.setBgColor = function(color) { this.el.style.color = color==null?'transparent':color; }
if(window.innerWidth)
{
gX=function(){return innerWidth;};
gY=function(){return innerHeight;};
}
else
{
gX=function(){return document.body.clientWidth;};
gY=function(){return document.body.clientHeight;};
}
/*** Example extend class ***/
JSFX.fxLayer2 = function(theHtml)
{
this.superC = JSFX.fxLayer;
this.superC(theHtml + "C");
}
JSFX.fxLayer2.prototype = new JSFX.fxLayer;
}/*** End Library Code ***/
/*************************************************/
/*** Class Firework extends FxLayer ***/
JSFX.Firework = function(fwImages)
{
window[ this.id = JSFX.getObjId() ] = this;
this.imgId = "i" + this.id;
this.fwImages = fwImages;
this.numImages = fwImages.length;
this.superC = JSFX.fxLayer;
this.superC("<img src='"+fwImages[0].src+"' name='"+this.imgId+"'>");
this.img = document.layers ? this.el.document.getElementsByTagName("img")[0] : document.getElementsByTagName("img")[this.imgId];
this.step = 0;
this.timerId = -1;
this.x = 0;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.ay = 0.2;
this.state = "OFF";
}
JSFX.Firework.prototype = new JSFX.fxLayer;
JSFX.Firework.prototype.getMaxDy = function()
{
var ydiff = gY() - 130;
var dy = 1;
var dist = 0;
var ay = this.ay;
while(dist<ydiff)
{
dist += dy;
dy+=ay;
}
return -dy;
}
JSFX.Firework.prototype.setFrame = function()
{
// this.img.src=this.fwName+"/"+this.step+".gif";
this.img.src=this.fwImages[ this.step ].src;
}
JSFX.Firework.prototype.animate = function()
{
if(this.state=="OFF")
{
this.step = 0;
this.x = gX()/2-20;
this.y = gY()-100;
this.moveTo(this.x, this.y);
this.setFrame();
if(Math.random() > .95)
{
this.dy = this.getMaxDy();
this.dx = Math.random()*-8 + 4;
this.dy += Math.random()*3;
this.state = "TRAVEL";
}
}
else if(this.state=="TRAVEL")
{
this.x += this.dx;
this.y += this.dy;
this.dy += this.ay;
this.moveTo(this.x,this.y);
if(this.dy > 1)
this.state="EXPLODE"
}
else if(this.state == "EXPLODE")
{
this.step++;
if(this.step < this.numImages)
this.setFrame();
else
this.state="OFF";
}
}
/*** END Class Firework***/
/*** Class FireworkDisplay extends Object ***/
JSFX.FireworkDisplay = function(n, fwImages, numImages)
{
window[ this.id = JSFX.getObjId() ] = this;
this.timerId = -1;
this.fireworks = new Array();
this.imgArray = new Array();
this.loadCount=0;
this.loadImages(fwImages, numImages);
for(var i=0 ; i<n ; i++)
this.fireworks[this.fireworks.length] = new JSFX.Firework(this.imgArray);
}
JSFX.FireworkDisplay.prototype.loadImages = function(fwName, numImages)
{
for(var i=0 ; i<numImages ; i++)
{
this.imgArray
= new Image();
this.imgArray.obj = this;
this.imgArray.onload = window[this.id].imageLoaded;
this.imgArray.src = fwName+"/"+i+".gif";
}
}
JSFX.FireworkDisplay.prototype.imageLoaded = function()
{
this.obj.loadCount++;
}
JSFX.FireworkDisplay.prototype.animate = function()
{
status = this.loadCount;
if(this.loadCount < this.imgArray.length)
return;
for(var i=0 ; i<this.fireworks.length ; i++)
this.fireworks.animate();
}
JSFX.FireworkDisplay.prototype.start = function()
{
if(this.timerId == -1)
{
this.state = "OFF";
this.timerId = setInterval("window."+this.id+".animate()", 40);
}
}
JSFX.FireworkDisplay.prototype.stop = function()
{
if(this.timerId != -1)
{
clearInterval(this.timerId);
this.timerId = -1;
for(var i=0 ; i<this.fireworks.length ; i++)
{
this.fireworks.moveTo(-100, -100);
this.fireworks.step = 0;;
this.fireworks.state = "OFF";
}
}
}
/*** END Class FireworkDisplay***/
JSFX.FWStart = function()
{
if(JSFX.FWLoad)JSFX.FWLoad();
myFW1.start();
myFW2.start();
myFW3.start();
myFW4.start();
}
myFW1 = new JSFX.FireworkDisplay(5, "http://YOUR REMOTE HOST/fw05", 21);
myFW2 = new JSFX.FireworkDisplay(5, "http://YOUR REMOTE HOST/fw08", 26);
myFW3 = new JSFX.FireworkDisplay(5, "http://YOUR REMOTE HOST/fw11", 30);
myFW4 = new JSFX.FireworkDisplay(5, "http://YOUR REMOTE HOST/fw13", 15);
JSFX.FWLoad=window.onload;
window.onload=JSFX.FWStart;
</SCRIPT>
Edit the red lines with your path to the sub-dirs you uploaded to on your remote host, and insert the code into your headers. 
