Script Categories













Messages >>> Mouse Trails.

A trail of cursors follow your cursor around the screen as you move the mouse. The image used here is transparent so the effect is subtle, but you could use any transparent image you want. Works in Internet Explorer and Netscape.

Step 1: Add the below code to the <body> section of your page:

<script language="javascript" type="text/javascript">      
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
var trailLength = 8;     // The length of trail
var path = "bluedot.gif"; // URL to cursor image

var isIE = false, isNav = false
var
  i
d
= 0;
var topPix = ".pixelTop", leftPix = ".pixelLeft", images, storage;
if (!document.all) {
isNav = true
topPix = ".top", leftPix = ".left";
}
else  {
isIE = true;
}
function initTrail() {
images = new Array();
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image();
images[i].src = path;
}
storage = new Array();
for (i = 0; i < images.length*3; i++) {
storage[i] = 0;
}
for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') ;
}
trail();
}
function trail() {
for (i = 0; i < images.length; i++) {
eval("document.getElementById('obj" + i + "').style" + topPix + "=" + storage[d]);
eval("document.getElementById('obj" + i + "').style" + leftPix + "=" + storage[d+1]);
d = d+2;
}
for (i = storage.length; i >= 2; i--) {;
storage[i] = storage[i-2];
}
d = 0;
clearTimeout(timer);
var timer = setTimeout("trail()", 10);
}
function processEvent(e) {
if (isIE) {
storage[0] = window.event.y+document.body.scrollTop+10;
storage[1] = window.event.x+document.body.scrollLeft+10;
}
else {
storage[0] = e.pageY+12;
storage[1] = e.pageX+12;
   }
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE);
}
if (isIE || isNav) {
initTrail();
document.onmousemove = processEvent;
}
//  End -->
</script>

Step 2: The script uses an image as part of its interface. You can create your own, or use the below :

(right click image, and select "Save Image As")
Upload it into the same directory as your webpage.

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©