Floating dots trailing cursor effect.

Hypergurl

Floating Dots Trailing Cursor. Trailing Cursor effect that leaves colored floating dots as mouse cursor is moved around webpage.

Home | Javascripts | Javascript Generators | HTML Tutorial | CSS Scripts | Free Online Games | iPhone Apps | Templates | Site Map

Summary: This simple javascript code will give your web page a new look. Simple to install the code will look great and add a bit of fun for your visitors.

Click here for more javascripts

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  // 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.

Search Site

Custom Search

Home | Sitemap | Email Hypergurl | Privacy Policy

Site design copyright 2000 - 2011 © Tanya Puntti Hypergurl.com