Floating Dots Cursor Trail

Below you will learn how to add
Floating Dots Cursor Trails
to your existing website. We have
used an example of this script as
you can see it here on this page.

Welcome to cursor.com

Google

Floating Dots Cursor Trail.

Another trailing cursor effect from the greatest DHTML and javascript writers
Urs Dudli and Peter Gehrig

Stunning DHTML animation you have never seen before. The random-image-engine creates a long cursor trail out of a set of images which gives the floating dots effect. When all floating dots have appeard the effect will then reverse and disappear.

Add as many images as you like. Easy configuration and installation. Crossbrowser.

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

Installation instructions.

STEP 1

Download this zip file which contains the 3 images required, unzip the file and place the images into the same folder as your webpages. You can use your own images and as many as you like.

STEP 2

Copy the code below and paste it right below the <body> tag of your webpage.

<script> // CREDITS: // Floating Dots Cursor // By Urs Dudli and Peter Gehrig www.24fun.com // Copyright (c) 2002 Peter Gehrig and Urs Dudli. All rights reserved. // Distributed by http://www.hypergurl.com // Permission given to use the script provided that this notice remains as is. // CONFIGURATION STARTS HERE // 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. Do not edit below. 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 3

Configure the url's and number of your image files, plus the speed of animation at the top of the script. Do not remove credits as this will be in violation of copyright terms.