
	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 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: 40452 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

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