Image Trail to Mouse Cursor

Notes: Last modified Dec 31st, 02' by DD for 1) NS6 functionality, 2) Ability to specify offset of trail from mouse pointer (to prevent trail from interfering with links 3) Prevention of trail from going over window's edge.

Description: Add some fun to your mouse cursor with this cross-browser trail script!

Demo:

---

Directions:

Step 1: Copy the following images into your website directory (6 images):

Step 2: Finally, add the below fragment to the body section of your page:

Select All

<script> /****************************************** * Cross browser cursor trailer script- By Brian Caputo (bcaputo@icdc.com) * Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code * 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("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10) var offsetx=15 //x offset of trail from mouse pointer var offsety=10 //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++){ src="'" 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((!A && !B) ? "<layer id="'" left="+Xp+" top="+Yp+" width="+W+" height="+H : " id="'" style="'position:absolute;left:" style="'">" : ">"); write((HT) ? HT : ""); if (!Op) closeContainer(N) } } function closeContainer(){ document.write((A || B)?"":"</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 moveContainer(N,DX,DY){ c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : ""; if (!B){ rightedge=window.innerWidth-T1[1]-20 bottomedge=window.pageYOffset+window.innerHeight-T1[2] } c.left=Math.min(rightedge, DX+offsetx); c.top=Math.min(bottomedge, DY+offsety); } 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) } 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>

For those who wish to customize the images used for the trail, all the changes should be done in the T1 array. The first parameter references the image's file name, while the second and third specifies the image's dimensions.