A Slacker's Guide to DHTML: Fading Mouse Trails

DHTML SCRIPTS

Menu/Navigation
Special Effects
Images
Forms
Text/Announcements
Windows/Pop-ups
Clocks/Countdowns
Miscellaneous

Fading Mouse Trails

Download: Save all these files for later use

The final image is a blank square, but don't worry about that.

Instructions: don't forget to change the URL in the code section in the HEAD of the document.

for (x=1; x < 6; x++) { eval("trailSpriteFrame" + x + " = new Image(28,36);"); eval("trailSpriteFrame" + x + ".src = 'http://www.quickrob.com/html/scripts/fadetrail/trailgif" + x + ".gif

As you might notice, I have changed the code to suit my particular needs by adding my actual file path. The code you can cut & paste here is generic.

This goes in the HEAD of your document.

Select All & Copy

<SCRIPT language="Javascript1.2">
<!--

/*
Fade-away cursor trail (By Dave Collins at davecollin1@excite.com)
Code and technique learned from site SiteExperts.com
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var isNS = (navigator.appName == "Netscape");
layerRef = (isNS) ? "document" : "document.all";
styleRef = (isNS) ? "" : ".style";

var queue = new Array();

var NUM_OF_TRAIL_PARTS = 5

for (x=1; x < 6; x++) {
	eval("trailSpriteFrame" + x + " = new Image(28,36);");
	eval("trailSpriteFrame" + x + ".src = 'trailgif" + x + ".gif';");
}

function trailSpriteObj(anID) {
	this.trailSpriteID = "trailSprite" + anID;
	this.imgRef = "trailSprite" + anID + "img";
	this.currentFrame = 1;
	this.animateTrailSprite = animateTrailSprite;
}

function processAnim() {
	for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
			queue[x].animateTrailSprite();
}

function shuffleQueue() {
	lastItemPos = queue.length - 1;
	lastItem = queue[lastItemPos];
	for (i = lastItemPos; i>0; i--) 
		queue[i] = queue[i-1];
	queue[0] = lastItem;
	
	queue[0].currentFrame = 1;
	eval(layerRef + '.' + queue[0].trailSpriteID +  styleRef + '.visibility = "visible"');

return 	queue[0].trailSpriteID;
}

function init() {
	
	for(x=0; x<NUM_OF_TRAIL_PARTS; x++)
		queue[x] = new trailSpriteObj(x+1) ;
	
	if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
	document.onmousemove = processMouse;

setInterval("processAnim();",25);
}	
if (document.all||document.layers)
window.onload = init;

//-->
</SCRIPT>

This goes in the BODY of your document, right after the body tag.

Select All & Copy

<DIV id="trailSprite1" style="position: absolute; height:28px; width:36px;z-index: 100">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite1img">
</DIV>
<DIV id="trailSprite2" style="position: absolute; height:28px; width:26px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite2img">
</DIV>
<DIV id="trailSprite3" style="position: absolute; height:28px; width:36px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite3img">
</DIV>
<DIV id="trailSprite4" style="position: absolute; height:28px; width:36px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite4img">
</DIV>
<DIV id="trailSprite5" style="position: absolute; height:28px; width:36px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite5img">
</DIV>
<script language="JavaScript1.2">
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
</script>

Home - Sitemap
Complete HTML Guide - Free Downloads for Webmasters - Tips & Tricks - Tag Reference
Style Sheets Tutorial - JavaScript Library - Dynamic HTML Script Library - XHTML Primer

dhtml/fadetrails.html

BIGGER ARCHIVES
MORE INFO
Everything I am not

http://www.dynamicdrive.com
http://www.dhtmlzone.com
http://www.dhtmlshock.com

Just about every Dynamic HTML script on this site is ©opyright Dynamicdrive.com, DHTML Zone, DHTML Shock, or the person whose name appears in the credits to the script. Let it be known that I wrote NONE of them.