Lissa Explains it All -- Custom Cursors for your Web Site

Welcome to Lissa's Cursors!! This is a cross-browser script. I only have a few cursor images now but I hope to add many more soon. If you see a cursor design you like, right click on the image and choose "save as" to save the image to your hard drive. You'll need to download all six images in order to make one cursor. You can copy and paste the following code (in the text box) and add it to your page after the <body> tag (if you don't know where the body tag is click here). You do need to substitute each of your 6 image names in this code where it says "imagename.gif." Each of the images that I have provided are numbered from 1-6 (not necessarily smallest to largest in size) and they have to stay numbered that way in the code. If you alter this code in any way, other than the image name, it will not work. Good luck!

If you're looking for the script that replaces the default cursor, visit my CSS page.

The author of this script is Brian Caputo and was used on this page with his written permission.

Get the script:

/******************************************
* Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com)
* Distributed with permission from Brian Caputo by lissaexplains.com
* Modified Dec 31st, 02' by DD. This notice must stay intact for use
******************************************/

A=document.getElementById
B=document.all;
C=document.layers;
T1=new Array("image6.gif",45,45,"image5.gif",45,45,"image4.gif",45,45,"image3.gif",45,45,"image2.gif",45,45,"image1.gif",45,45)

var offsetx=0 //x offset of trail from mouse pointer
var offsety=0 //y offset of trail from mouse pointer

nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20
bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2]

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 closeContainer(){
document.write((A || B)?"</div>":"</layer>")
}

function getXpos(N){
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}

function getYpos(N){
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}

function newPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2)
}

function getedgesIE(){
rightedge=document.body.clientWidth-T1[1]
bottomedge=document.body.scrollHeight-T1[2]
}

if (B){
window.onload=getedgesIE
window.onresize=getedgesIE
}

if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
</script>

View cursor images here

This Web site is registered with the Library of Congress Copyright Office.