1. Computing
Send to a Friend via Email

Follow the Mouse

3. Add to Your Page

clr gif
Join the Discussion

Questions? Comments?

More of this Feature

Introduction Obtain the Script

All that remains to be done now is to add the object to your page that you want to have follow the mouse.

Here is the code for my sample object:

<div id="mydiv">XX</div>

Simply substitute whatever text or image code that you want where I have the "XX".

The stylesheet entry that goes with this is coded as follows:

#mydiv {
position:absolute; overflow:hidden; visibility: hidden;
z-index:999; width:20px; height:15px;
background-color:#ffffcc;
}

The stylesheet can either be placed between <style> and </style> in the head of your page or can be placed in your external stylesheet along with any other stylesheet options that you are applying to the current page. The position and visibility attributes must be coded exactly as shown. The overflow attribute can be coded as hidden or visible depending on the content of the div (in most cases it doesn't make any difference). The z-index, width, height, background-color, and any other attributes that you want can be adjusted to suit your particular object.

You can actually name the div with whatever id you like as long as you change all three references (the one in the div tag, the one in the stylesheet, and the one assigned to divName in the script).

Sample Page | Obtain the Script | Add to Your Page

©2014 About.com. All rights reserved.