Usability Tip:
Custom Cursors Guide Visitors

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Web site visitors claim to love sites that boast cool interactive effects. At the same time, they hate sites that download slowly. What's a webmaster to do?

Try using some of the cool Cascading Style Sheet (CSS) effects that add interactive and usability to your site - without bloating the file size. One of the easiest - but most frequently overlooked - is the ability to define a custom cursor. A single line of code gives visitors important clues about page elements, link contents, and link destinations.

Choosing Your Cursor

The CSS2 standard allows 17 different cursor definitions, but we're only going to focus on a few that immediately increase the interactivity and usability of your site.

Don't get too carried away with this easy special effect. The cursor option you choose should actually increase the usability of your Web site. Visitors quickly become accustomed to certain features and get confused and frustrated if those standards change across Web sites.

Adding The Cursor To Your Page

Generally, it's best to define a custom cursor with a single CSS definition and apply it using a class attribute. For instance:

<style type="text/css">
.helpCursor {cursor:help;}
</style>

Page links that point the visitor to more information would have a class attribute added to the HREF tag:

<a href="faq.html" class="helpCursor" title="Visit our Frequently Asked Questions page for more information">Frequently Asked Questions</a>

Define all custom cursors like this, except for the URL value. Because you're using your own image file, you'll have to tell the browser where to go find the image.

Important: be careful with the file name and path. If you're using an external style sheet, the path is relative to the .css file and not the .html file!

Here's the syntax for the URL cursor value:

<style type="text/css">
.catHead {cursor: url(images/catHead.gif);}
</style>

In this case, the browser will go to the images subdirectory and look for a file named catHead.gif. Apply the class to a page element just as you would any class definition.

Browser Considerations

Unfortunately, you always need to consider browser compatibility issues - particularly when you're using relatively new CSS effects.

Be aware of how different browsers - even browser versions - display these effects. Note that only Explorer 6.x browsers support the URL value.

In this case, only Netscape and Explorer browsers fully apply the CSS standard and allow you set custom cursors for any page element. Theoretically, a paragraph tag could have one cursor applied, an H2 tag a different cursor, while an image tag has a third custom cursor applied!

Generally though, custom cursors are most useful on page links and inside forms.

Unfortunately, visitors surfing with Opera won't see any of your custom cursors - no matter where you apply the classes!

But - unlike many other coding and CSS issues - these effects degrade gracefully. They won't break your page in any browser and they do add functionality to those browsers that support the standard.

Visit this sample page to see if the browser you're using supports CSS cursor effects.

Wondering if you've used any techniques or made any coding errors that might break your page in some browsers? You can't just test in one browser and operating system and be safe because there are an almost infinite number of combinations your visitors could be using.

NetMechanic's Browser Photo tool makes thorough testing easy and inexpensive. See actual screen shots of your page displayed in 16 different operating system, browser version, and screen resolution combinations. It's the fully-functional testing lab you never had the time or money to set up.