Kód:

<script>
var xLayerNo=0;
function xLayer(newLayer, x, y, w)
{
 if(x==null)x=0;
 if(y==null)y=0;
 if(w==null)w=100;
  if(document.layers)
 {
  if(typeof newLayer == "string")
  {
   this.layer=new Layer(w);
   this.layer.document.open();
   this.layer.document.write(newLayer);
   this.layer.document.close();
  }
  else
   this.layer=newLayer;

  this.layer.moveTo(x,y);
  this.images=this.layer.document.images;
  }
 else
 if(document.all)
 {
  var Xname;
  if(typeof newLayer == "string")
  {
   xName="xLayer" + xLayerNo++;
    var txt =   "<DIV ID='" + xName
    + "' STYLE=\"position:absolute;"
    + "left:"  + x + ";"
    + "top:"   + y + ";"
    + "width:" + w + ";"
    + "visibility:hidden\">"
    + newLayer
     + "</DIV>";

   document.body.insertAdjacentHTML("BeforeEnd",txt);
  }
  else
   xName=newLayer.id;

  this.content = document.all[xName];
  this.layer   = document.all[xName].style;
  this.images  = document.images;
 }
 else
 if (document.getElementById)
 {
  /*** Add Netscape 6.0 support (NOTE: This may work in I.E. 5+. Will have to test***/

  var newDiv;

  if(typeof newLayer == "string")
  {
   var xName="xLayer" + xLayerNo++;

   var txt = ""
    + "position:absolute;"
    + "left:"  + x + "px;"
    + "top:"   + y + "px;"
    + "width:" + w + "px;"
    + "visibility:hidden";

   var newRange   = document.createRange();

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

   document.body.appendChild(newDiv);

   newRange.setStartBefore(newDiv);
   strFrag = newRange.createContextualFragment(newLayer); 
   newDiv.appendChild(strFrag);
  }
  else
   newDiv = newLayer;

  this.content = newDiv; 
  this.layer   = newDiv.style;
  this.images  = document.images;
 }

 return(this);
}

function xLayerFromObj(theObj)
{
 if(document.layers)
  return(new xLayer(document.layers[theObj]));
 else
 if(document.all)
  return(new xLayer(document.all[theObj]));
 else
 if(document.getElementById)
  return(new xLayer(document.getElementById(theObj)));
}

if(navigator.appName.indexOf("Netscape") != -1 && !document.getElementById)
{
var 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
};

/**** START prototypes for NS ***/
xLayer.prototype.moveTo  = function(x,y)  { this.layer.moveTo(x,y); }
xLayer.prototype.moveBy  = function(x,y)  { this.layer.moveBy(x,y); }
xLayer.prototype.show  = function()  { this.layer.visibility = "show"; }
xLayer.prototype.hide   = function()  { this.layer.visibility = "hide"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor  = function(color) { this.layer.bgColor = color; }
xLayer.prototype.setBgImage  = function(image) { this.layer.background.src = image; }
xLayer.prototype.getX   = function()  { return this.layer.left; }
xLayer.prototype.getY   = function()  { return this.layer.top; }
xLayer.prototype.getWidth  = function()  { return this.layer.width; }
xLayer.prototype.getHeight  = function()  { return this.layer.height; }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible  = function()  { return this.layer.visibility == "show"; }
xLayer.prototype.setContent   = function(xHtml)
{
 this.layer.document.open();
 this.layer.document.write(xHtml);
 this.layer.document.close();
}

xLayer.prototype.clip = function(x1,y1, x2,y2)
{
 this.layer.clip.top =y1;
 this.layer.clip.left =x1;
 this.layer.clip.bottom =y2;
 this.layer.clip.right =x2;
}
xLayer.prototype.addEventHandler = function(eventname, handler)
{
        this.layer.captureEvents(eventmasks[eventname]);
        var xl = this;
        this.layer[eventname] = function(event) {
            return handler(xl, event.type, event.x, event.y,
                           event.which, event.which,
                           ((event.modifiers & Event.SHIFT_MASK) != 0),
                           ((event.modifiers & Event.CTRL_MASK) != 0),
                           ((event.modifiers & Event.ALT_MASK) != 0));
        }
}

/*** END NS ***/
}
else if(document.all)
{
/*** START prototypes for IE ***/
xLayer.prototype.moveTo = function(x,y)
{
 this.layer.pixelLeft = x;
 this.layer.pixelTop = y;
}
xLayer.prototype.moveBy = function(x,y)
{
 this.layer.pixelLeft += x;
 this.layer.pixelTop += y;
}
xLayer.prototype.show  = function()  { this.layer.visibility = "visible"; }
xLayer.prototype.hide  = function()  { this.layer.visibility = "hidden"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.backgroundColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = image; }
xLayer.prototype.setContent   = function(xHtml) { this.content.innerHTML=xHtml; }
xLayer.prototype.getX  = function()  { return this.layer.pixelLeft; }
xLayer.prototype.getY  = function()  { return this.layer.pixelTop; }
xLayer.prototype.getWidth = function()  { return this.layer.pixelWidth; }
xLayer.prototype.getHeight = function()  { return this.layer.pixelHeight; }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "visible"; }
xLayer.prototype.clip  = function(x1,y1, x2,y2)
{
 this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
 this.layer.pixelWidth=x2;
 this.layer.pixelHeight=y2;
 this.layer.overflow="hidden";
}
xLayer.prototype.addEventHandler = function(eventName, handler)
{
 var xl = this;
 this.content[eventName] = function()
 {
            var e = window.event;
            e.cancelBubble = true;
            return handler(xl, e.type, e.x, e.y,
                           e.button, e.keyCode,
                           e.shiftKey, e.ctrlKey, e.altKey);
        }
}
 /*** END IE ***/
}
else if (document.getElementById)
{
/*** W3C (NS 6) ***/
xLayer.prototype.moveTo = function(x,y)
{
 this.layer.left = x+"px";
 this.layer.top = y+"px";
}
xLayer.prototype.moveBy  = function(x,y)  { this.moveTo(this.getX()+x, this.getY()+y); }
xLayer.prototype.show  = function()  { this.layer.visibility = "visible"; }
xLayer.prototype.hide  = function()  { this.layer.visibility = "hidden"; }
xLayer.prototype.setzIndex = function(z) { this.layer.zIndex = z; }
xLayer.prototype.setBgColor = function(color) { this.layer.backgroundColor = color; }
xLayer.prototype.setBgImage = function(image) { this.layer.backgroundImage = image; }
xLayer.prototype.getX  = function()  { return parseInt(this.layer.left); }
xLayer.prototype.getY  = function()  { return parseInt(this.layer.top); }
xLayer.prototype.getWidth = function()  { return parseInt(this.layer.width); }
xLayer.prototype.getHeight = function()  { return parseInt(this.layer.height); }
xLayer.prototype.getzIndex = function() { return this.layer.zIndex; }
xLayer.prototype.isVisible = function() { return this.layer.visibility == "visible"; }
xLayer.prototype.clip  = function(x1,y1, x2,y2)
{
 this.layer.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")";
 this.layer.width=x2 + "px";
 this.layer.height=y2+ "px";
 this.layer.overflow="hidden";
}
xLayer.prototype.addEventHandler = function(eventName, handler)
{
 var xl = this;
 this.content[eventName] = function(e)
 {
            e.cancelBubble = true;
            return handler(xl, e.type, e.pageX, e.pageY,
                           e.button, e.keyCode,
                           e.shiftKey, e.ctrlKey, e.altKey);
 }
}
xLayer.prototype.setContent   = function(xHtml)
{
 var newRange   = document.createRange();
 newRange.setStartBefore(this.content);

 while (this.content.hasChildNodes())
  this.content.removeChild(this.content.lastChild);

 var strFrag    = newRange.createContextualFragment(xHtml); 
 this.content.appendChild(strFrag);
}

} else
{
xLayer.prototype.moveTo  = function(x,y)  {  }
xLayer.prototype.moveBy  = function(x,y)  {  }
xLayer.prototype.show   = function()  {  }
xLayer.prototype.hide   = function()  {  }
xLayer.prototype.setzIndex = function(z) {  }
xLayer.prototype.setBgColor  = function(color) {  }
xLayer.prototype.setBgImage  = function(image) {  }
xLayer.prototype.getX   = function()  { return 0; }
xLayer.prototype.getY   = function()  { return 0; }
xLayer.prototype.getWidth  = function()  { return 0; }
xLayer.prototype.getHeight  = function()  { return 0; }
xLayer.prototype.getzIndex = function() { return 0; }
xLayer.prototype.isVisible  = function()  { return false; }
xlayer.prototype.setContent   = function(xHtml) { }
}
</script>
<script>
function xMouse()
{  this.X = 0;
 this.Y = 0;

 if(navigator.appName.indexOf("Netscape") != -1)
 {
  this.getMouseXY = function (evnt)
  {
   document.ml.X=evnt.pageX;
   document.ml.Y=evnt.pageY;
  }

  window.captureEvents(Event.MOUSEMOVE);
  window.onmousemove = this.getMouseXY;

  document.ml = this;
 }
 else if(document.all)
 {
  if(navigator.appVersion.indexOf("MSIE 5.") != -1)
   this.getMouseXY = function ()
   {
    document.ml.X = event.x + document.body.scrollLeft;
    document.ml.Y = event.y + document.body.scrollTop;
   }
  else
   this.getMouseXY = function ()
   {
    document.ml.X = event.x;
    document.ml.Y = event.y;
   }

  document.ml = this;
  document.onmousemove = this.getMouseXY;
 }
 return(this);
 
}
</script>

<script>
var m = new xMouse();

var oneDeg=(2*Math.PI)/360;

/*** verander hieronder de variabelen voor een ander effect ***/
var Radius = 1;
var NumStars=64;
var NumSteps=5;
var StepAngle=(11.25)*oneDeg;

var StarObject=new Array();

var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function dec2hex(dec)
{
 return(hexDigit[dec>>4]+hexDigit[dec&15]);
}
function hex2dec(hex)
{
 return(parseInt(hex,16))
}

function CreateStar()
{

 this.layer   = new xLayer("X", 100, 100, 10);
 this.currAngle  = 0;
 this.step  = 0;
 this.x  = 100;
 this.y  = 100;
 return (this);
}

/*** Choose a random pinwheel configuration ***/
function restart()
{
 var num=Math.floor(Math.random()*4);
 
 for(i=0;i<NumStars;i++)
  StarObject[i].layer.hide();

 if(num==0){
  Radius = 1;
  NumStars=32;
  NumSteps=16;
  StepAngle=(25)*oneDeg;
 }
 

 for(i=0 ; i<NumStars; i++)
 {
  var s=StarObject[i];
  s.currAngle = (StepAngle*i);
  s.step = (i%NumSteps);
  s.x=m.X;
  s.y=m.Y;
 }

 for(i=0;i<NumStars;i++)
  StarObject[i].layer.show();

 
}
function start()
{

 for(i=0 ; i<NumStars; i++)
 {
  StarObject[i]=new CreateStar();
  StarObject[i].currAngle = (StepAngle*i);
  StarObject[i].step = (i%NumSteps);
  StarObject[i].layer.clip(0,0,2,2);
  StarObject[i].layer.setBgColor("red");
 }

 for(i=0 ; i<NumStars ; i++)
  StarObject[i].layer.show();

 /*** Remove this if you only 1 type of pinwheel ***/
 
 Rotate();
}

function changeColour(s)
{
 var colour="";

 r2= Math.floor(Math.random()*2)*255;
 g2= Math.floor(Math.random()*2)*255;
 b2= Math.floor(Math.random()*2)*255;

 if(r2==0 && g2==0 && b2==0)
  r2=255;

 colour = "#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2);
 s.layer.setBgColor(colour);

 s.x=m.X;
 s.y=m.Y;
}
function Rotate()
{
 var x;
 var y;
 for (i = 0 ; i < NumStars ; i++ ) {
  var s=StarObject[i];
  
  if(s.step==0)
   changeColour(s);

  var angle = s.currAngle;
  var rad   = s.step*Radius + 10;
  x = s.x + rad*Math.cos(angle);
  y = s.y + rad*Math.sin(angle);

  s.layer.moveTo(x,y);

  s.step = (s.step+1)%NumSteps;
 }

 setTimeout("Rotate()", 30);
}

function handle_resize()
{
 if(document.layers)
  start();
}

window.onresize=handle_resize;
window.onload=start;

</script>