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

JavaScript: Cool Cursors

Links to other cursor scripts:

A Clock Cursor | Another trailing icon cursor | FlamingText.com (where the title graphic came from)

ripple rule

Use View-Source to see the code. You may copy it from there or from below. The cursor code is from Lissa Explains - it is
freely shared and contains a source citation.

Note: you will need to have already saved 6 very tiny transparent .gif files in the same folder as your page will reside (not the images file this time!). Create these in Photoshop, Photoshop Elements or AppleWorks Paint (or other paint program). If you use AW, Format the Document to 30 x 30 pixels or .5 inch x .5 inch. Your image backgrounds should be transparent, which you can't do in AW, but you can create by pasting the graphic into Photoshop Elements, GifBuilder, or ClarisHomePage.

Here are my graphics: (they don't work very well - you might want to improve them)

 

You can even create the tiny images in Word and use the built-in transparency feature to make them transparent.
Then copy and paste them into Photoshop Elements and save "for the web".

 

Source Code - to use the code, insert your image names in place of the red text. Insert the code between <head> and </head>.

<script>
/*
Cross browser cursor trailer script
By Brian Caputo (bcaputo@icdc.com)
Written permission granted to lissaexplains.com
to distribute the script for personal use. (DO NOT REMOVE THIS)
*/
B=document.all;
C=document.layers;
T1=new Array("star1.gif",38,35,"star2.gif",30,31,"star3.gif",28,26,"star4.gif",22,21,"star5.gif",16,16,"star6.gif",10,10)
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
else write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer(){
document.write((B)?"</div>":"</layer>")
}
function getXpos(N){
return (B) ? parseInt(B[N].style.left) : C[N].left
}
function getYpos(N){
return (B) ? parseInt(B[N].style.top) : C[N].top
}
function moveContainer(N,DX,DY){
c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY
}
function cycle(){
//if (IE5)
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}
function newPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2
)
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
</script>

Elizabeth Sky-McIlvain 11/17/02