Splash Tracker: new free DHTML animation

SPLASH TRACKER
Splash Tracker is a stunning little DHTML animation you have never seen before. The random-image-engine creates a loooooooooong funny cursor trail out of a set of images. Add as many images as you like. Easy configuration and installation. Crossbrowser.

TEST SCRIPT
Wait until this page has been loaded. Then move your cursor around the webpage until the animation stops and all images disappear.

CONFIGURATION

Step 1
Open your webpage. Copy the following code and paste it right below the <body>-tag of your webpage.

// URLs of the splash images. Replace it with your images.
var imgurl=new Array ("greensmall.gif","redsmall.gif","yellowsmall.gif")

// maximum numbers of splash images displayed on your webpage
var max_img=100

// how long shall the images be displayed after the animation is over (seconds)
var standstill=2

// speed of animation: lower means faster
var speed=6

///////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////

var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgurl[i]
}

var isfinished=false
var range=imgurl.length
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var i_img=0
var posleft
var postop
var shownext=0
var standstill=standstill*1000

function showimages(e) {
	if (i_img<=max_img && isfinished==false) {
		if (shownext==0) {
			if (ie) {
				posleft=document.body.scrollLeft+window.event.x;
				postop=document.body.scrollTop+window.event.y;
				thisobj=eval("document.all.d"+i_img+".style")
				thisobj.visibility="visible"
				thisobj.posLeft=posleft
				thisobj.posTop=postop
			}
			if (ns6) {
				posleft=e.pageX
				postop=e.pageY
				var thisid="d"+i_img
				thisobj=document.getElementById(thisid).style
				thisobj.visibility="visible"
				thisobj.left=posleft
				thisobj.top=postop
			}
			if (ns4) {
				posleft=e.pageX
				postop=e.pageY
				thisobj=eval("document.d"+i_img)
				thisobj.visibility="visible"
				thisobj.left=posleft
				thisobj.top=postop
			}
			i_img++
			
			shownext++
		}
		else {
			shownext++
			if (shownext>speed) {shownext=0}
		}
	}
	else if (isfinished==false) {
		isfinished=true
		i_img=0
		var ti=setTimeout("clearimages()",standstill)
	}
}

function clearimages() {
	if(i_img<=max_img) {	
		if (ie) {
			thisobj=eval("document.all.d"+i_img+".style")
			thisobj.visibility="hidden"
		}
		if (ns6) {
			var thisid="d"+i_img
			thisobj=document.getElementById(thisid).style
			thisobj.visibility="hidden"
		}
		if (ns4) {
			thisobj=eval("document.d"+i_img)
			thisobj.visibility="hidden"
		}
		i_img++
		var timer=setTimeout("clearimages()",20)
	}
	else {
		clearTimeout(timer)
	}
}
	
function pageisloaded() {
	if (ns4) {document.captureEvents(Event.MOUSEMOVE);}
	document.onmousemove=showimages
}

if (ie || ns4 || ns6) {
	window.onload=pageisloaded
}

for (i=0;i<=max_img;i++) {	
	var randimg=Math.floor(range*Math.random())
	if (ie || ns6) {
		document.write("<DIV id='d"+i+"' style='position:absolute;left:0;top:0;visibility:hidden'><img src='"+imgurl[randimg]+"'></div>");
	}
	if (ns4) {
		document.write("<layer name='d"+i+"' left=0 top=0 visibility=hide><img src='"+imgurl[randimg]+"'></layer>");
	}
}

document.close()

</script>

Step 2
Go to the top of the script-code and configure the URLs and the number of your images as well as the speed of the animation.

Step 3
Have fun!

Click here to download files