Today is Monday, January 06, 2025. Page created 12/05/02, updated 05/20/07

Mouse Mouse Trails Trails

This is a very cool effect to have on your page. You can have your message or anything else you want written to follow your mouse around.

We have tested the code in IE 7.0, Firefox 2.0.0.3, Opera 9.20, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in all platforms with the exceptions of Firefox 2.0.0.3 and Netscape 8.1.3

Depending on your knowledge of HTML and java is quite simple. It is a three ( 3 ) part copy and paste code that one part will be placed in the <HEAD> section of your document, the second part goes directly into the <BODY> tag and the last part goes anywhere in the <BODY> section. If you need a little refresher on howto add the onLoad event handler into the <BODY> tag, see the below example.

Default <BODY> Tag ~ No onLoad event handler

<body bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">

Reconfigured <BODY> Tag ~ onLoad Event Handler Inserted

<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll" bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">

There are only two (2) basic reconfigurations within the script. The first is in the CSS Style sheet you pasted into the <HEAD>. This is to change font, color, etc. The second and final reconfiguration is to add your message to follow your cursor. This is done in the <BODY> section.

<HEAD> Section Reconfigurations

<style>
.spanstyle {
        position:absolute;
        visibility:visible;
        top:-50px;
        font-size:10pt;
        font-family:Verdana;
      font-weight:bold;
        color:Yellow;
}
</style>

Just play around with the above until it fits you and your site.

<BODY> Section Reconfigurations

<!-- This part ONE of TWO that goes BETWEEN your BODY tags. -->
<script>

var x,y
var step=20
var flag=0

// Your Message goes here. Important: Note the space at the end of the sentence!!!
var message="Message Goes Here  "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

Note Of Importance Note of Importance ~ you should not have your message too long. Reason being is quite simple, too long and it will be off the page without you doing anything. You want short and sweet.

For Your Information For your Information:     To answer your next question, the answer is "No", you can not substitute an image for the text message. If you want to have an image following your cursor, grab the below link and you are there.
Image Following Mouse ]

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. We have searched the Original Script Site ] and to the best of our abilities cannot locate the script on their server. Therefore we are now archiving the code for your convenience. If you have any problems with this or anything else, feel free to consult our FAQ ] and if you can't find the answer there, contact us ].
Get Code Here ]   [ Rate This Page ]   this page to a friend.

The Consigliere

Talk Live To A Support Technician

Search Our Site By Individual letter

A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

Little Tips Directory

Page 1  ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5  ] [ Page 6  ] [ Page 7  ]

Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ Form Index ]
2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]
Disclaimer ]

News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-2025