Log in

View Full Version : Cursor Trail


wutu
09-30-2008, 01:47 AM
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):



<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
Master_script_maker
09-30-2008, 07:23 PM
ahh!! the dreaded eval! try this instead:
doesn't work right now, but im working on it

<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>
wutu
09-30-2008, 09:16 PM
i used the code you provided and it didnt work...


:confused:
Master_script_maker
09-30-2008, 09:17 PM
note edit