
	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! || Forums || RAM

Search Site:

Home » DHTML » Article

DHTML Mouse Trailor with Text Script

Article by:

Jeff Anderson ( 1362 ) (3/13/2002)

	Add to Favourites
	Tell a friend

Summary:

A Classic Mouse Trail Script, with configurable text, rather than images. We chose `I love you` for our text - what will you chose?

Viewed: 34586 times

Rating (25 votes):

2.9 out of 5

Rate this Article

Read Comments

Post Comments

This classic mouse trail script allows you to put the text of your choice along side the mouse pointer, and follow the users movement round the screen.

To configer the text, simply change the message variable (currently 'I Love You').

If you want to change the style of the text, simply edit the style sheet code, where it says .trail_style

You can change font, color, size and all the usual text variations.

See the Mouse Trail in action

Select All Code


<html>
<head>
<script language="Javascript">

var x,y; 
var gap_between=10;
var checkit=0;
var speed=40;
var message="I Love You";
message=message+' ';

 
message=message.split("") ;
 
var xposition=new Array() ;

for (i=0;i<=message.length-1;i++) { 
        xposition[i]=-100
} 
 
var yposition=new Array() 
for (i=0;i<=message.length-1;i++) { 
           yposition[i]=-100
} 
 
function doMouseMove(e){ 
if(document.layers) {
	   x=e.pageX 
	   y=e.pageY
	   }
else
{
	   x=document.body.scrollLeft+event.clientX ;
	   y=document.body.scrollTop+event.clientY; 
}
 
checkit=1 
 
} 
 
function DoTrail() { 
           if (checkit==1 && document.all) { 
	              for (i=message.length-1; i>=1; i--) { 
	                                xposition[i]=xposition[i-1]+gap_between 
	                                 yposition[i]=yposition[i-1] 
	           } 
	
	           xposition[0]=x+gap_between 
	           yposition[0]=y 
	         
	           for (i=0; i<message.length-1; i++) { 
	                      var thisspan = eval("span"+(i)+".style") 
	                      thisspan.posLeft=xposition[i] 
	                      thisspan.posTop=yposition[i] 
	              } 
           } 
         
           else if (checkit==1 && document.layers) { 
           for (i=message.length-1; i>=1; i--) { 
                              xposition[i]=xposition[i-1]+gap_between 
                              yposition[i]=yposition[i-1] 
           } 
        
	   xposition[0]=x+gap_between 
            yposition[0]=y 
         
            for (i=0; i<message.length-1; i++) { 
                      var thisspan = eval("document.span"+i) 
                      thisspan.left=xposition[i] 
                      thisspan.top=yposition[i] 
           } 
           } 
                      var count_time=setTimeout("DoTrail()",speed) 
 } 
</script>
<style type="text/css">

.trail_style{
	position:absolute;
	visibility:visible;
	top:-100px;
	font-size:12px;
	font-family:Verdana, Arial;font-weight:bold;
	color:#000000;}  
</style>


</head>
<BODY onLoad='DoTrail();'>





<script>
 
for (i=0;i<=message.length-1;i++) { 
       document.write("<span id='span"+i+"' class='trail_style'>") 
           document.write(message[i]) 
       document.write("</span>") 
} 
 
if (document.layers){ 
        document.captureEvents(Event.MOUSEMOVE); 
 
} 
document.onmousemove = doMouseMove; v
</script>
</body>
</html>

Useful Links

Fat Cow Hosting

FatCow Review

Advertise here

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 Mouse Trailor with Text Script'

Posted by : Archive Import (checkmate) at 06:50 on Wednesday, May 14, 2003

Man 'tis thing is unfunctional i say nothing happens to the cursor

Posted by : Archive Import (Fr0) at 16:45 on Sunday, June 08, 2003

Wow what can I say?... AMAZING script!!!
I like it alot, so much in fact that I used it in my webpage for my company, and it has gone over quite well..

Thanks

Fr0

Posted by : Archive Import (ok) at 13:18 on Thursday, June 19, 2003

its not working properly i think i need some help with how to work it please email me back

Posted by : Archive Import (lala) at 00:57 on Monday, July 28, 2003

this script doesnt work...the cursor stays the same =\

Posted by : Archive Import (mahipal) at 05:56 on Friday, August 15, 2003

there is a 'v' at the end of 4th line from below which makes it to not work properly.cheers

Posted by : Archive Import (yep) at 17:03 on Wednesday, August 27, 2003

this thing doesn't work. i dunno y

Posted by : Archive Import (d) at 11:12 on Friday, September 05, 2003

how the hell do u download this thing no info

Posted by : Archive Import (Void) at 04:19 on Tuesday, September 09, 2003

There does seem to be a 'v' out of place, otherwise this rocks!

Posted by : xiaochong at 21:49 on Monday, April 26, 2004

I like it!

To post comments you need to become a member. If you are already a member, please log in .

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

•	C++
•	Re: refresh parent after closing pop up window
•	Dynamic Insertion
•	Date and Time function around the world???
•	Significant Factors
•	Perl array access
•	Re: huffman encoding and decoding in C++...
•	Perl One Liner: Replace {(
•	Re: html including php, accessing the functions

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

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