
	��ASP Shopping Cart,�Forum�&�BBS ��- all for $20 from CodeToad Plus!	��

��Home�||�ASP�|�ASP.Net�|�C++/C#�|�DHTML�|�HTML�|�Java�|�Javascript�|�Perl�|�VB�|�XML�||�CodeToad�Plus!�||�RAM�

Search Site:

Home��DHTML��Article

DHTML Echoing Cursor Trail

Article by:

�Jeff Anderson �( 1362 ) (3/31/2002)

	Add to Favourites
	Tell a friend

Summary:

This mouse trail creates an 'echo' of the mouse pointer as you move around the screen.

Viewed: 40188 times

Rating (13 votes):�

�3.2 out of 5

�

Rate this Article

�

Read Comments

�

Post Comments

View Live Demo
Download Zip file.

To acheive the effect, firstly copy the two images below into the same directory as the script itself will be in. (The one on the left is a blank image, so we've put a border round it so you can find it!!)

��

Now simply paste the script below into your page just after the body tag:

Select All Code

<script language="javascript">
 
arrImages=new Array("/trail1.gif", 28, 33, "/trail1.gif", 28, 33,"/trail1.gif" ,28 , 33 ,"/trail1.gif" ,28 ,33 ,"/trail1.gif",28 ,33 ,"/sp.gif" ,28 ,33)
noImages=6;
var speed=100;
var addleftscroll=0;
var addtopscroll=0;

for (i=0;i<noImages;i++){
createDynLayer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+arrImages[i*3]+"' width="+arrImages[(i*3+1)]+" height="+arrImages[(i*3+2)]+" border=0>")}

function createDynLayer(idName,XCoord,YCoord,sWidth,sHeight,aaa,hhh,oo,ns){
    with (document){
    write((!document.all) ? "<layer id='"+idName+"' left="+XCoord+" top="+YCoord+" width="+sWidth+" height="+sHeight : "<div id='"+idName+"'"+" style='position:absolute;left:"+XCoord+"; top:"+YCoord+"; width:"+sWidth+"; height:"+sHeight+"; ");
    if(ns){
        if (document.layers)
        write(" style='");
        write(ns+";' ")
    }
    else write((document.all)?"'":"");
        write((aaa)? aaa+">" : ">");
        write((hhh) ? hhh : "");
        if (!oo)
        deleteDynLayer(idName)
    }
}

function deleteDynLayer(){
    document.write((document.all)?"":"")
}

function getXpos(N){
    return (document.all) ? parseInt(document.all[N].style.left) : document.layers[N].left
}

function getYpos(N){
    return (document.all) ? parseInt(document.all[N].style.top) : document.layers[N].top
}

function moveDynLayer(idName,Xpos,Ypos){
    createit=(document.all) ? document.all[idName].style :document.layers[idName];createit.left=Xpos;createit.top=Ypos
}

function newPos(e){
moveDynLayer("CUR"+(noImages-1),(document.all)?event.clientX+addleftscroll:e.pageX+2,(document.all)?event.clientY+addtopscroll:e.pageY+2
)
}


function doAgain(){
//if (IE5) 
if (document.all&&window.print){
addleftscroll=document.body.scrollLeft;
addtopscroll=document.body.scrollTop;
}
for (i=0;i<(noImages-1);i++){
moveDynLayer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
}
}


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

View Live Demo
Download Zip file.

Useful Links

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: ��Poor Excellent

View highlighted Comments

User Comments on 'DHTML Echoing Cursor Trail'

RELATED ARTICLES
Simple Thumbnail Browsing Solution by Troy Wolf This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets.

Creating CSS Buttons by Thomas D. Greer With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript.

DHTML Javascript Ticker by Premshree Pillai This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature.

DHTML Horizontal Scroller by Premshree Pillai Scroll text horizontally when the user hovers over a link.

Manipulate Scrollbar Colors Using CSS and JavaScript by Mike Thompson The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

DHTML News Bar by Premshree Pillai This is the News Bar script which displays a number of messages and rotates them using DHTML.

DHTML Scrolling Image by Premshree Pillai Using this script the user can scroll an image left or right by clicking a buttong

DHTML Zoom In and Out Script by Premshree Pillai Using zoOom, you can zoom in and zoom out any image that is specified in the code.

DHTML Image Zoom Out by Premshree Pillai Click on the image and it zooms out and disappears. This script could be a way to handle advertising or other images.

Simple Mouse Trail using VB Script by Jeff Anderson With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch.

Recent Forum Threads

•�	Run a program both on windows and linux
•�	VERO.SurfCAM.v2014
•�	Schlumberger.Petrel.V2013.2
•�	Petrel.V2013.2
•�	Altair.HyperWorks.v12
•�	VoluMill.v6.1
•�	VoluMill.NEXION.6
•�	VERO.SurfCAM.v2014
•�	Schlumberger.Petrel.V2013.2

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

��privacy��-� contact��-� advertise��-� hot links��-� link to us��-� submit your article��