CSS Codes
CSS Layouts
Results 1 to 4 of 4

Thread: Cursor Trail

  1. 09-30-2008, 01:47 AM #1
    wutu
    wutu is offline New Comer (less than 5 posts)
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Cursor Trail

    1) CODE TITLE: Cursor Trail

    2) AUTHOR NAME/NOTES: Tim Bargman

    3) DESCRIPTION: Creates a trail of cursors behind the original

    4) URL TO CODE:

    or, ATTACHED BELOW (see #3 in guidelines below):

    Code:
    <html>
<head>
<style>
body {
cursor:url("cursor.cur");
}
</style>
<SCRIPT language="Javascript1.2">
<!--

//number of cursors behind original cursor (MUST BE LESS THAN 16)
var trailparts = 15

//////////////////NO EDITING BELOW THIS LINE//////////////////

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

var queue = new Array();

for (x=1; x < 6; x++) {
	eval("trailSpriteFrame" + x + " = new Image();");
	eval("trailSpriteFrame" + x + ".src = 'cursor" + x + ".png';");
}


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

function animateTrailSprite() {
	if (this.currentFrame <6 ) {
		if (isNS) {
			eval("document." + this.trailSpriteID +".document['"+ this.imgRef + "'].src  =  trailSpriteFrame" + this.currentFrame + ".src");
		} else {
			eval("document['" + this.imgRef + "'].src  =  trailSpriteFrame" + this.currentFrame + ".src");
		}
		this.currentFrame ++;
	} else {
		eval(doc + '.' + this.trailSpriteID +  style + '.visibility = "hidden"');
	}	
}



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

function processMouse(e) {
	currentObj = shuffleQueue();
	if (isNS) {
		eval("document." + currentObj + ".left = e.pageX;");
		eval("document." + currentObj + ".top = e.pageY;");
	} else {
		eval("document.all." + currentObj + ".style.pixelLeft = event.clientX + document.body.scrollLeft;");
		eval("document.all." + currentObj + ".style.pixelTop = event.clientY + document.body.scrollTop;");
	}
}

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(doc + '.' + queue[0].trailSpriteID +  style + '.visibility = "visible"');	

	return 	queue[0].trailSpriteID;
}

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

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

//-->
</SCRIPT>
</head>
<body>
<div id="trailSprite1" style="position: absolute;z-index: 100">
<img src="blank.gif" border=0 name="trailSprite1img">
</div>
<div id="trailSprite2" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite2img">
</div>
<div id="trailSprite3" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite3img">
</div>
<div id="trailSprite4" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite4img">
</div>
<div id="trailSprite5" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite5img">
</div>
<div id="trailSprite6" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite6img">
</div>
<div id="trailSprite7" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite7img">
</div>
<div id="trailSprite8" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite8img">
</div>
<div id="trailSprite9" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite9img">
</div>
<div id="trailSprite10" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite10img">
</div>
<div id="trailSprite11" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite11img">
</div>
<div id="trailSprite12" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite12img">
</div>
<div id="trailSprite13" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite13img">
</div>
<div id="trailSprite14" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite14img">
</div>
<div id="trailSprite15" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite15img">
</div>
<script language="JavaScript1.2">
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
</script>
</body>
</html>

    you also need to download the files attached and EXTRACT THEM TO THE SAME FOLDER AS THE WEB PAGE
    Last edited by wutu; 09-30-2008 at 02:09 AM. Reason: Included a screenshot
    Reply With Quote Reply With Quote
  2. 09-30-2008, 07:23 PM #2
    Master_script_maker
    Master_script_maker is offline Senior Coders
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    ahh!! the dreaded eval! try this instead:
    Edit: doesn't work right now, but im working on it

    Code:
    <html>
<head>
<style>
body {
cursor:url("cursor.cur");
}
</style>
<SCRIPT type='text/javascript'>
<!--

//number of cursors behind original cursor (MUST BE LESS THAN 16)
var trailparts = 15
//////////////////NO EDITING BELOW THIS LINE//////////////////
var trailSpriteFrame=new Array();
var isNS = (navigator.appName == "Netscape");
doc = (isNS) ? "document" : "document.all";
style = (isNS) ? "" : ".style";

var queue = new Array();

for (x=1; x < 6; x++) {
	trailSpriteFrame[x] = new Image();
	trailSpriteFrame[x].src = 'cursor'+x+'.png';
}


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

function animateTrailSprite() {
	if (this.currentFrame <6 ) {
		if (isNS) {
			document.(this.trailSpriteID).document[this.imgRef].src  =  trailSpriteFrame[this.currentFrame] + ".src";
		} else {
			document[this.imgRef].src  =  trailSpriteFrame[this.currentFrame] + ".src";
		}
		this.currentFrame ++;
	} else {
		doc.(this.trailSpriteID + style).visibility = "hidden";
	}	
}



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

function processMouse(e) {
	currentObj = shuffleQueue();
	if (isNS) {
		document.currentObj.left = e.pageX;
		document.currentObj.top = e.pageY;
	} else {
		document.all.currentObj.style.pixelLeft = event.clientX + document.body.scrollLeft;
		document.all.currentObj.style.pixelTop = event.clientY + document.body.scrollTop;
	}
}

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;
	doc.queue[0].(trailSpriteID + style).visibility = "visible";	

	return 	queue[0].trailSpriteID;
}

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

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

//-->
</SCRIPT>
</head>
<body>
<div id="trailSprite1" style="position: absolute;z-index: 100">
<img src="blank.gif" border=0 name="trailSprite1img">
</div>
<div id="trailSprite2" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite2img">
</div>
<div id="trailSprite3" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite3img">
</div>
<div id="trailSprite4" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite4img">
</div>
<div id="trailSprite5" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite5img">
</div>
<div id="trailSprite6" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite6img">
</div>
<div id="trailSprite7" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite7img">
</div>
<div id="trailSprite8" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite8img">
</div>
<div id="trailSprite9" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite9img">
</div>
<div id="trailSprite10" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite10img">
</div>
<div id="trailSprite11" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite11img">
</div>
<div id="trailSprite12" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite12img">
</div>
<div id="trailSprite13" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite13img">
</div>
<div id="trailSprite14" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite14img">
</div>
<div id="trailSprite15" style="position: absolute;z-index: 10">
<img src="blank.gif" border=0 name="trailSprite15img">
</div>
<script type='text/javasript'>
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
</script>
</body>
</html>
    Last edited by Master_script_maker; 09-30-2008 at 07:32 PM.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@§†ê® §©®¡þ† /\/\@|{ê®
    There are 10 kinds of people in the world, those that understand binary and those that don't.
    Reply With Quote Reply With Quote
  3. 09-30-2008, 09:16 PM #3
    wutu
    wutu is offline New Comer (less than 5 posts)
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default re

    i used the code you provided and it didnt work...


    Reply With Quote Reply With Quote
  4. 09-30-2008, 09:17 PM #4
    Master_script_maker
    Master_script_maker is offline Senior Coders
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    note edit
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@§†ê® §©®¡þ† /\/\@|{ê®
    There are 10 kinds of people in the world, those that understand binary and those that don't.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules