Least Tern > Tech Class > Teacher Resources > Resources for Web Design

JavaScript: Another Trailing Icon Cursor

Links to other cursor scripts:

FlamingText.com (where the title graphic came from) | A Clock Cursor

Copy the code below. Change the red URL to the location of your cursor icon. Paste the code as you are instructed in blue.

Create the image in Photoshop, Photoshop Elements or AppleWorks Paint (or other paint program) or use an icon from the web.If you use AW Painting, Format the Document to 36 x 36 pixels or .5 inch x .5 inch. Your backgrounds should be transparent, which you can't do in AW, but you can create by pasting the graphic into Photoshop, GifBuilder, or ClarisHomePage.

Source Code

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<style type="text/css">
BODY {overflow: scroll; overflow-x: hidden;}
</style>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Marcin Wojtowicz (one_spook@hotmail.com) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var trailLength = 8; // The length of trail
var path = "goldarrow2.gif"; // URL to cursor image
var isIE = false, isNav = false, range = "all.", style = ".style", i, d = 0;
var topPix = ".pixelTop", leftPix = ".pixelLeft", images, storage;
if (document.layers) {
isNav = true, range = "layers.", style = "", topPix = ".top", leftPix = ".left";
} else if (document.all) {
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
(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>');
}
trail();
}
function trail() {
for (i = 0; i < images.length; i++) {
eval("document." + range + "obj" + i + style + topPix + "=" + storage[d]);
eval("document." + range + "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>

Elizabeth Sky-McIlvain 11/17/02