New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Other Sections
Sweet Ads
Bookmark online:


Custom Cursor Script

Author: Dynamic Drive

Description: Starting in IE6, for the first time ever, you can specify your own image for the browser to use as the cursor! The image will replace the default "arrow" one. Properly done, a custom cursor can bring furthered consistency to your site's design.

Note that the image must be of the type .cur or .ani

Demo: If you're using IE6+, you should see a custom cursor in place of the default arrow one.

Directions: Custom cursors in IE6 is accomplished using W3C's proposed cursor attribute/definition. Simply add the below style sheet to the HEAD section of your page:

Select All

where "mycursor.cur" is the name of your cursor file and in the same directory as where the page resides. You can change the keyword "BODY" to localize the cursor to a subelement within the page, such as "P".

Creating the custom cursor for IE6

Ok, so you're probably sweating it right now on how to create the actual cursor file. To start things off, you'll find a collection of premade cursor files in your computer to utilize (if you're using Windows). Just look in the Windows->Cursor directory using File Explorer.

For a selection of "home made" cursors, Quiet Storm (a DD visitor) has kindly created some variations of the original windows cursors for you to use. You'll find purple arrows, red hands, and even cursors with the US flag backdrop. Click here to download the zip file.

Finally, if none of the above suits your liking, you can create your own icon file, with the help of an icon creator. Click here for Cnet's list of em'. Some are easier to use than others, while others are free. 

Have fun!