bludde

Stap 1: Plak onderstaand script in de <head> van je site.

<SCRIPT>
// Original Author : Roy Whittle www.Roy.Whittle.com
var ns4 = (navigator.appName.indexOf("Netscape") != -1 && !document.getElementById);

if(!window.Test)
Test=new Object();

Test.layerNo=0;

Test.createLayer = function(htmlStr, parent)
{var elem = null;
if(document.layers)
{  var xName="xLayer" + Test.layerNo++;
  if(parent == null)
   elem=new Layer(2000);
  else
   elem=new Layer(2000, parent.elem);

  elem.document.open();
  elem.document.write(htmlStr);
  elem.document.close();
  elem.moveTo(0,0);
  elem.innerHTML = htmlStr;}
else
if(document.all)

{if(parent == null)
parent=document.body;
else
parent=parent.elem;

  var xName = "xLayer" + Test.layerNo++;
  var txt = '<DIV ID="' + xName + '"'
   + ' STYLE="position:absolute;left:0;top:0;visibility:hidden">'
   + htmlStr
   + '</DIV>';

parent.insertAdjacentHTML("BeforeEnd",txt);

  elem = document.all[xName];}

else
if (document.getElementById)
{if(parent == null)
   parent=document.body;
  else
   parent=parent.elem;

  var xName="xLayer" + Test.layerNo++;
  var txt = ""
   + "position:absolute;left:0px;top:0px;visibility:hidden";

var newRange = document.createRange();

  elem = document.createElement("DIV");
  elem.setAttribute("style",txt);
  elem.setAttribute("id", xName);

parent.appendChild(elem);

  newRange.setStartBefore(elem);
  strFrag = newRange.createContextualFragment(htmlStr);
  elem.appendChild(strFrag);}

return elem;}

Test.Layer = function(newLayer, parent)
{if(!newLayer)
return;

if(typeof newLayer == "string")
this.elem = Test.createLayer(newLayer, parent);
else
this.elem=newLayer;

if(document.layers)
{ this.images  = this.elem.document.images;
  this.parent  = parent;
  this.style  = this.elem;
  if(parent != null)
   this.style.visibility = "inherit"; }
else
{ this.images = document.images;
  this.parent = parent;
  this.style   = this.elem.style;}
window[this.elem.id]=this;}

Test.findLayer = function(theDiv, d)
{if(document.layers)
{ var i;
  if(d==null) d = document;
  var theLayer = d.layers[theDiv];
  if(theLayer != null)
   return(theLayer);
  else
   for(i=0 ; i<d.layers.length ; i++)
   { theLayer = Test.findLayer(theDiv, d.layers[i].document);
    if(theLayer != null)
     return(theLayer); }
  return("Undefined....");}
else
if(document.all)
  return(document.all[theDiv]);
else
if(document.getElementById)
  return(document.getElementById(theDiv));
else
  return("Undefined.....");}

Test.Layer.prototype.moveTo = function(x,y)
{ this.style.left = x+"px";
this.style.top = y+"px";}

if(ns4)
Test.Layer.prototype.moveTo = function(x,y) { this.elem.moveTo(x,y); }

Test.Layer.prototype.show  = function() { this.style.visibility = "visible"; }
Test.Layer.prototype.hide  = function() { this.style.visibility = "hidden"; }
Test.Layer.prototype.isVisible = function() { return this.style.visibility == "visible"; }
if(ns4)
{ Test.Layer.prototype.show  = function() { this.style.visibility = "show"; }
Test.Layer.prototype.hide   = function() { this.style.visibility = "hide"; }
Test.Layer.prototype.isVisible = function() { return this.style.visibility == "show"; }}

Test.Layer.prototype.setzIndex = function(z) { this.style.zIndex = z; }
Test.Layer.prototype.getzIndex = function() { return this.style.zIndex; }
Test.Layer.prototype.setColor = function(c){this.style.color=c;}
if(ns4)
Test.Layer.prototype.setColor = function(c)
{ this.elem.document.write("<FONT COLOR='"+c+"'>"+this.elem.innerHTML+"</FONT>");
  this.elem.document.close();}
Test.Layer.prototype.setBgColor = function(color) { this.style.backgroundColor = color==null?'transparent':color; }
if(ns4)
Test.Layer.prototype.setBgColor = function(color) { this.elem.bgColor = color; }
Test.Layer.prototype.setBgImage = function(image) { this.style.backgroundImage = "url("+image+")"; }
if(ns4)
Test.Layer.prototype.setBgImage = function(image) { this.style.background.src = image; }
Test.Layer.prototype.setContent   = function(xHtml) { this.elem.innerHTML=xHtml; }
if(ns4)
Test.Layer.prototype.setContent   = function(xHtml)
{ this.elem.document.write(xHtml);
  this.elem.document.close();
  this.elem.innerHTML = xHtml;}

Test.Layer.prototype.clip = function(x1,y1, x2,y2){ this.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4)
Test.Layer.prototype.clip = function(x1,y1, x2,y2)
{ this.style.clip.top =y1;
  this.style.clip.left =x1;
  this.style.clip.bottom =y2;
  this.style.clip.right =x2;}
Test.Layer.prototype.resizeTo = function(w,h)
{ this.style.width =w + "px";
this.style.height =h + "px";}
if(ns4)
Test.Layer.prototype.resizeTo = function(w,h)
{ this.style.clip.width =w;
  this.style.clip.height =h;}

Test.Layer.prototype.getX = function() { return parseInt(this.style.left); }
Test.Layer.prototype.getY = function() { return parseInt(this.style.top); }
if(ns4)
{ Test.Layer.prototype.getX = function() { return this.style.left; }
Test.Layer.prototype.getY = function() { return this.style.top; }}

Test.Layer.prototype.getWidth  = function() { return this.elem.offsetWidth; }
Test.Layer.prototype.getHeight = function() { return this.elem.offsetHeight; }
if(!document.getElementById)
Test.Layer.prototype.getWidth  = function()
  {return this.elem.scrollWidth;}

if(ns4)
{ Test.Layer.prototype.getWidth = function() { return this.style.clip.right; }
Test.Layer.prototype.getHeight = function() { return this.style.clip.bottom; }}

if(ns4)
{Test.Layer.prototype.setOpacity = function(pc) {return 0;}}
else if(document.all)
{ Test.Layer.prototype.setOpacity = function(pc)
{  if(this.style.filter=="")
   this.style.filter="alpha(opacity=100);";
  this.elem.filters.alpha.opacity=pc;}}
else
{Test.Layer.prototype.setOpacity = function(pc){ this.style.MozOpacity=pc+'%' }}

if(ns4)
{Test.eventmasks = {
       onabort:Event.ABORT, onblur:Event.BLUR, onchange:Event.CHANGE,
       onclick:Event.CLICK, ondblclick:Event.DBLCLICK,
       ondragdrop:Event.DRAGDROP, onerror:Event.ERROR,
       onfocus:Event.FOCUS, onkeydown:Event.KEYDOWN,
       onkeypress:Event.KEYPRESS, onkeyup:Event.KEYUP, onload:Event.LOAD,
       onmousedown:Event.MOUSEDOWN, onmousemove:Event.MOUSEMOVE,
       onmouseout:Event.MOUSEOUT, onmouseover:Event.MOUSEOVER,
       onmouseup:Event.MOUSEUP, onmove:Event.MOVE, onreset:Event.RESET,
       onresize:Event.RESIZE, onselect:Event.SELECT, onsubmit:Event.SUBMIT,
       onunload:Event.UNLOAD };
Test.Layer.prototype.addEventHandler = function(eventname, handler)
{this.elem.captureEvents(Test.eventmasks[eventname]);
          var xl = this;
      this.elem[eventname] = function(event) {
  event.clientX = event.pageX;
  event.clientY = event.pageY;
  event.button = event.which;
  event.keyCode = event.which;
  event.altKey =((event.modifiers & Event.ALT_MASK) != 0);
  event.ctrlKey =((event.modifiers & Event.CONTROL_MASK) != 0);
  event.shiftKey =((event.modifiers & Event.SHIFT_MASK) != 0);
            return handler(xl, event);}}
Test.Layer.prototype.removeEventHandler = function(eventName)
{ this.elem.releaseEvents(Test.eventmasks[eventName]);
  delete this.elem[eventName];}}

else
if(document.all)
{Test.Layer.prototype.addEventHandler = function(eventName, handler)
{ var xl = this;
  this.elem[eventName] = function()
  {       var e = window.event;
             e.cancelBubble = true;
   if(document.getElementById)
   { e.layerX = e.offsetX;
    e.layerY = e.offsetY;}
   else
   { ev = new Object();
    for(i in e)
    ev[i] = e[i];
    ev.layerX = e.offsetX;
    ev.layerY = e.offsetY;
    e = ev;}
            return handler(xl, e); }}
Test.Layer.prototype.removeEventHandler = function(eventName)
{this.elem[eventName] = null;}}

else
{Test.Layer.prototype.addEventHandler = function(eventName, handler)
{ var xl = this;
  this.elem[eventName] = function(e)
  {        e.cancelBubble = true;
             return handler(xl, e); }}
Test.Layer.prototype.removeEventHandler = function(eventName)
{this.elem[eventName] = null;}}
Test.Layer.prototype.setTimeout = function(f, t)
{setTimeout("window."+this.elem.id+"."+f, t);}
</SCRIPT>

<SCRIPT>
if(!window.Test)
Test=new Object();
if(!Test.Browser)
Test.Browser = new Object();

Test.Browser.mouseX = 0;
Test.Browser.mouseY = 0;

if(navigator.appName.indexOf("Netscape") != -1)
{Test.Browser.captureMouseXY = function (evnt)
{ Test.Browser.mouseX=evnt.pageX;
Test.Browser.mouseY=evnt.pageY;}

Test.FireSpark = function(resetType)
{ this.superC = Test.Layer;
this.superC("X");

this.dx = Math.random() * 4 - 2;
this.dy = Math.random() * 4 - 2;
this.ay = .05;
this.x = 100;
this.y = 100;
if(resetType == 0)
  this.resetSpark = this.reset0;
else if(resetType == 1)
  this.resetSpark = this.reset1;
else if(resetType == 2)
  this.resetSpark = this.reset2;
else if(resetType == 3)
  this.resetSpark = this.reset3;
else
  this.resetSpark = this.reset0;}

Test.FireSpark.prototype = new Test.Layer;

Test.FireSpark.prototype.changeColour = function()
{ var colour="";
r2= Math.random()*255;
g2= r2;
b2= 0;

if(!(r2 | g2 | b2))
{ r2=255;
g2=255;
b2=0;}

colour = "#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2);
this.setBgColor(colour);}
Test.FireSpark.prototype.reset0 = function()
{if(Math.random() >.85)
{this.x=Test.Browser.mouseX+6;
  this.y=Test.Browser.mouseY+12;
  this.dx = Math.random() * 1.5 + 0.5;
  this.dy = Math.random() * 2 + 2;
  this.changeColour();}}

Test.FireSpark.prototype.reset1 = function()
{if(Math.random() >.90)
{ this.x=Test.Browser.mouseX+4;
  this.y=Test.Browser.mouseY;
  this.dx = Math.random() * 6 + 2;
  this.dy = Math.random() * 2 - 1;
  this.changeColour();}}
Test.FireSpark.prototype.reset2 = function()
{if(Math.random() >.80)
{ this.x=Test.Browser.mouseX - 5;
  this.y=Test.Browser.mouseY - 5;
  this.dx = Math.random() * 4 - 2;
  this.dy = Math.random() * 4 - 2;
  this.changeColour();}}
Test.FireSpark.prototype.reset3 = function()
{if(Math.random() >.70)
{ this.x=Test.Browser.mouseX -1 + Math.random()*2;
  this.y=Test.Browser.mouseY-2;
  this.dx = Math.random() * 1 - 0.5;
  this.dy = Math.random() * -6 - 1;
  this.changeColour();}}
Test.FireSpark.prototype.animate = function()
{ this.resetSpark();
this.dy += this.ay;
this.x += this.dx;
this.y += this.dy;
this.moveTo(this.x, this.y);}
Test.FireObj = function(numStars, anim)
{ this.id = "Test_FireObj_"+Test.FireObj.count++;
this.sparks = new Array();
for(i=0 ; i<numStars; i++)
{ this.sparks[i]=new Test.FireSpark(anim);
  this.sparks[i].clip(0,0,2,2);
  this.sparks[i].setBgColor("yellow");
  this.sparks[i].show();}
window[this.id]=this;
this.animate();}

Test.FireObj.count = 0;
Test.FireObj.prototype.animate = function()
{setTimeout("window."+this.id+".animate()", 40);

for(i=0 ; i<this.sparks.length ; i++)
this.sparks[i].animate();}

Test.Fire = function(numStars, anim)
{return new Test.FireObj(numStars, anim);}

if(navigator.appName.indexOf("Netscape") != -1 && !document.getElementById)
{if(!Test.ns_resize)
{ Test.ow = outerWidth;
  Test.oh = outerHeight;
  Test.ns_resize = function()
  {if(outerWidth != Test.ow || outerHeight != Test.oh )
   location.reload();}}
window.onresize=Test.ns_resize;}
</SCRIPT>

<SCRIPT>function Begin() {Test.Fire(30, 3);}</SCRIPT>

Stap 2: Plaats de "onLoad" in de "body" van je site.