|
|
|
|||||||||||||
|
Home - Tips & Tutorials - JavaScript Demos - Java Applet Demos - Resources - Contact |
||||||||||||||
|
Cursor Trailer Script by Brian Caputo from Dynamic Drive >>> This script uses six images to create the trailing mouse cursor effect. You can use the ones to the right or use graphics in graduating sizes that you find elsewhere on the web. Be sure that they have a transparent background or they will look silly on the page. The ones offered here look best on pages with light-colored backgrounds. Ann-S-Thesia, a graphics designer who I feature on the Resources page under Web Page Graphics, offers lots of graphics she created especially for this script. You can find the download page here. If you do download and use them, please do her a courtesy and put a link back to her website on every page you use the trailer balls. If you do use different graphics, change the graphics filenames in the script, but do not remove "files/". It is needed to call up the graphics from your Files directory. Make sure you do upload your graphics there, whether through your Files Manager, from SiteBuilder itself, or by FTP. If you're not with Homestead, you can omit the "files/" reference mentioned above. Tip: this script does not seem to work well when you use Cascading Style Sheets on the same page. Tip: like many cursor scripts, this works only for visitors using Internet Explorer. In Firefox, for example, the graphics just freeze where you place the script on the page. |
<script> /* Cross browser cursor trailer script By Brian Caputo (bcaputo@icdc.com) Permission given to Dynamicdrive.com to feature the script in it's DHTML archive For 100's more DHTML scripts and components, visit Dynamicdrive.com */ B=document.all; C=document.layers; T1=new Array("files/trail1.gif",38,35,"files/trail2.gif",30,31,"files/trail3.gif",28,26,"files/trail4.gif",22,21,"files/trail5.gif",16,16,"files/trail6.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>
|
|||||||||||||
| Formerly hosted at www.geocities.com/ramblingtutor/ |
Home - Tips & Tutorials - JavaScript Demos - Java Demos - Resources - Contact Webpage graphics by Arride Graphics
|
|||||||||||||
