Custom Cursors for Your Web Pages

Everyone is familiar with the cursor or mouse pointer. It changes as you move around a web page to indicate what you can do with it. This happens automatically, and the web designer can manipulate the mouse pointer to display any of the standard cursor shapes (see Using Styles to Change the Mouse Pointer). But what about custom cursors? One of the new features of Internet Explorer 6 was the ability for web designers to specify their own cursors. If you have IE6 point at this paragraph to see your cursor change to a lovely picture of me (well, it's my page after all!)

Custom cursors have been around for a while, pioneered by the CometZone (http://cometzone.cometsystems.com). Their software allows you to display a custom cursor on your web page, chosen from their huge library of cursors. It works with a wide range of browsers (Internet Explorer 3 and Netscape 3 onwards) but requires the user to download and install a software plug-in, and requires you to put a CometZone button on any page that displays one of their cursors (which is a reasonable request as the service is free!). It's a great way to customize your pages with little effort.

Why Do It Yourself?

A third-party solution might not suit you:

Your visitors may be reluctant to download what appears to be "special software" when they visit your page. Indeed, their security settings may prevent them from doing so. Without ActiveX enabled they won't be prompted to download the required plug-in and without JavaScript enabled the custom cursor will not be displayed.
You might want to design your own cursor, perhaps a company logo or something specific to the content of your page.
You might want to display the cursor on just a part of the page, or display different cursors on different parts of the page.

With Internet Explorer 6 you can easily display any cursor of your choice. They can be static or animated and, as the cursor type is determined by the HTML Style property, you can specify exactly where on your page a particular cursor is displayed. One page can display as many cursor styles as you need, and the process is independent of any other programming (such as JavaScript) so it will work regardless of the user's security settings.

Click here to see an example of a window with a themed colour scheme, employing custom background, font, hyperlink, scrollbar colours and matching coloured cursors.

What Do Custom Cursors Look Like?

Point at the cells of the table below and watch the cursor style change for each one:

This cell displays my Access cursor. This cell displays my Excel cursor. This cell displays my Word cursor. Here's a different Excel cursor.

As you saw at the top of the page, cursors can display a detailed image. Their small size can give a photo-like impression of clarity even when displayed with a 256-colour resolution. You are not limited to static cursors. Point at this paragraph to see a animated cursor.

Where Do You Get Custom Cursors?

If you want free, ready-made cursors, a visit to your favourite search engine will return thousands of hits (the last time I asked Google about free cursors it came back with 220,000 hits) so if you are looking for a particular theme make sure you add it to your keywords (Google returned a mere 5,900 hits for Star Trek cursors!).

The other option is to build your own. If you are a serious web designer, you'll have some kind of graphics program and many are capable of creating cursor files. For cursors and icons I currently use IconForge from CursorArts (http://www.cursorarts.com). My copy came free on the cover disk of a computer magazine! For my animated cursors I also use Animation Shop which comes with my favourite graphics program Paint Shop Pro (http://www.jasc.com). Probably the best known program is Microangelo from Impact Software (http://www.impactsoft.com). You can download evaluation copies of these programs from the publishers' web sites, and a visit to your favourite download site will return a host of freeware and shareware programs - try a search for "icon editors" at Tucows (http://www.tucows.com/).

About Cursor Files

Cursors are small graphics files. Static cursors can be 16x16, 32x32 or 48x48 pixels with a colour depth of up to 256 colours (Windows 2000 and Windows XP can display cursors with up to 32-bit colours). Animated cursors are normally 32x32 pixels. Both types can have transparent backgrounds.

A cursor file has a ".cur" extension, an animated cursor has the extension ".ani".

To create the cursors displayed here I created graphics of the appropriate size in Paint Shop Pro and pasted them into either Icon Forge or Animation Shop for final adjustment and export as cursor files.

Displaying Custom Cursors on Your Pages

The cursor is defined through an HTML style, so it can be applied to any element on a page that accepts HTML style definitions. You must upload the cursor file(s) to your web site. The style is then defined by referring to the cursor's path and filename. The cursors here are located in a folder called "cursors" which is in the same folder as the page itself. The style definition would be something like:

style="cursor: url('cursors/mycursor.cur')"

Note that the cursor path and filename has to be in quotes and, because the style is itself in quotes, I have nested single and double quote marks.

Here are some practical examples

Applying a Custom Cursor to a Whole Page

To apply a cursor to an entire page, the simplest way is to apply the style to the body tag:

<body style="cursor: url('cursors/martin.cur')">

Applying a Custom Cursor to a Paragraph

To apply a cursor to a single paragraph, such as this one, the style can be applied to the paragraph tag itself. For example:

<p style="cursor: url('cursors/target.cur')">

Applying a Custom Cursor to a Hyperlink

When the mouse moves over a hyperlink, the cursor will revert to the standard "hand" style, unless you specify that you want something different. For example, I have used an animated cursor for this download link. Download a zip file containing the cursors you have seen here. The code for changing the link cursor was:

<a style="cursor: url('cursors/download.ani')" href="cursors/cursors.zip">
Download a zip file containing the cursors you have seen here.</a>

Applying a Custom Cursor to an Image

In the same way a custom cursor can be applied to an image (point at the image below to see this in action):

 <img style="cursor: url('cursors/heart.cur')" src="../images/me_lg.jpg">

Applying a Custom Cursor to Table Cells

Different cursors can be applied to the cells of a table:

This cell shows the standard cursor.

This cell shows a red cursor.

This cell shows a blue cursor.

This cell shows a green cursor.

Each cell has a different style attribute applied:

<td style="cursor: url('cursors/redarrow.cur')" width="25%" align="center">
This cell shows a red cursor.</td>

Using the <span> Tag

Whilst this list is not exhaustive, for most other purposes a custom cursor can be applied by means of the <span> tag. In this paragraph this method has been used to display a custom cursor wherever the words "custom cursor" appear. Point at any of the occurrences of the words "custom cursor" to see the result. Simply surround the required element with <span> tags as follows:

<span style="cursor: url('cursors/arrow.ani')">your text goes here</span>

Applying Custom Cursors Using Stylesheets

If you use stylesheets, you can define custom cursors as styles. Here is part of the stylesheet for the this sample page for example:

<style>
<!--
body { background-color: seashell;
       font-family: Verdana,Arial,Helvetica,sans-serif;
       font-size: 70%;
       color: darkviolet;
       scrollbar-base-color: violet;
       cursor: url("cursors/smallviolet.cur")}
a:hover { color: dodgerblue;
          text-decoration: underline;
          cursor: url("cursors/smallteal.cur") }
-->
</style>

Footnote

When I first saw custom cursors I thought they were an irritating gimmick, just as I reacted in when I saw coloured scrollbars. But their appropriate use on stylish, well designed pages has changed my mind. As with all such things, use them sparingly, unless you want your pages looking like this one!

^ top

Hit Counter