Arrow Trailer: Have Fun

Arrow Trailer: Have Fun
Surpise your visitors with this unique cursor-cursor-cursor-cursor-cursor-trailer. Copy'n'paste configuration. Crossbrowser (Not NN6).

Test the script
Just move your mouse over this page to test Arrow Trailer.

Installation
Step 1: Click here to download this arrow-image

and put it into the same folder as your webpage.

Step 2: Open your webpage. Paste the following code right above the </body> tag:

<script>
// CREDITS:
// Arrow Trailer
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.heavyscripts.com.

var step=8 
var stepbasic=0
var numberofimages=8
var spacebetweenimgs=0
if (document.all) {
	var differencex=-6
	var differencey=-4
}
if (document.layers) {
	var differencex=-4
	var differencey=-2
}
var x,y
var flag=0
var xpos=new Array()
for (i=0;i<=8;i++) {
	xpos[i]=-100
}

var ypos=new Array()
for (i=0;i<=numberofimages;i++) {
	ypos[i]=-100
}

function handlerMM(e) {
	x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}

function initiatetracker() {
	if (document.all) {
		for (i=0; i<numberofimages; i++) {
    		var thisspan=eval("span"+(i)+".style")
			thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    		thisspan.visibility="visible"
    	}
		makesnake()
	}
	if (document.layers) {
		for (i=0; i<numberofimages; i++) {
    		var thisspan=eval("document.span"+i)
			thisspan.left=xpos[i]
			thisspan.top=ypos[i]
			thisspan.visibility="visible"
		}
    	makesnake()
	}
}

function makesnake() {
	if (flag==1 && document.all) {
    	for (i=numberofimages; i>=1; i--) {
   			xpos[i]=xpos[i-1]+spacebetweenimgs
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x+differencex
		ypos[0]=y+differencey
	
		for (i=0; i<numberofimages; i++) {
    		var thisspan = eval("span"+(i)+".style")
    		thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    	}
		if (xpos[0]==xpos[7]) {
			for (i=0; i<numberofimages; i++) {
    			var thisspan = eval("span"+(i)+".style")
    			thisspan.visibility="hidden"
    		}
		}
		else {
			for (i=0; i<numberofimages; i++) {
    			var thisspan = eval("span"+(i)+".style")
    			thisspan.visibility="visible"
    		}
		}
	}
	
	else if (flag==1 && document.layers) {
    	for (i=numberofimages; i>=1; i--) {
   			xpos[i]=xpos[i-1]+spacebetweenimgs
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x+differencex
		ypos[0]=y+differencey
	
		for (i=0; i<numberofimages; i++) {
    		var thisspan = eval("document.span"+i)
    		thisspan.left=xpos[i]
			thisspan.top=ypos[i]
    	}
		if (xpos[0]==xpos[7]) {
			for (i=0; i<numberofimages; i++) {
    			var thisspan = eval("document.span"+i)
    			thisspan.visibility="hidden"
    		}
		}
		else {
			for (i=0; i<numberofimages; i++) {
    			var thisspan = eval("document.span"+i)
    			thisspan.visibility="visible"
    		}
		}
	}
	var timer=setTimeout("makesnake()",30)
}

if (document.layers){
	document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=handlerMM;
window.onload=initiatetracker;
</script>

IMPORTANT: Do not paste this code into tables cells nor between <DIV> and </DIV> tags nor between any other container tags!