Use cursors to customize Web sites
This article provides information on the following topics:
• What type of cursors are compatible?
• Saving your cursor, uploading it to your website
• Defining a custom cursor for the page
• Defining a custom cursor for specific elements
If you own a website, it's interesting to use mouse cursors to enhance the user experience. Modern internet browsers permit to change mouse cursors for a whole page, for links or for other elements. The best way to proceed in order to implement cursors in websites is to use CSS.
All the codes provided below are compatible with the following browsers: Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+. We have found some compatibility issues with Opera and Google Chrome (see compatibility).
Changing cursors in webpage is in theory a great functionality. But it's very easy to confuse your users by defining inappropriate cursor styles. We recommend to be be very careful with cursor customization by respecting the following basic rules:
• Don't use inappropriate cursor types: Use custom cursors but don't confuse the user. Keep in mind that the pointer informs the user of the action he'll perform by clicking. for example, keep an arrow pointer for the whole page, use a hand for links and so on.
• Keep your web design coherent: Don't forget that your cursors will be perceived by your visitors as part of your website. Use cursors which have a style compatible with your website. For example, if your website has a Web 2.0 style, use cursors with the same style and colors.
• Stay cool with animations: Animated cursors are cool, but don't overuse them. The animations must be discreet and appropriate. They usually permit to show a possible action on a specific element. For example, we don't recommend to use an animated cursor for the default cursor of the whole page.
What type of cursors are compatible?
You can create static cursors (CUR) or animated cursors (ANI). Modern browsers support both types.
We recommend to include the following image formats in static cursors: 32x32 RGB/A, 32x32 256 colors and 32x32 16 colors. You can optionally add 32x32 Mono. For animated cursors, we recommend 32x32 RGB/A.
Saving your cursor, uploading it to your website
1. Create your cursors and save them in a specific folder on your local computer.
2. Launch the FTP client you use to upload/update your files to your website. Connect to your website.
3. When you're connected, create a specific folder on your website, for example "http://www.mywebsite.com/cursors/". Keep the file names unchanged and upload them to that folder.
If you use a unix-based server, keep in mind that filenames are case sensitive.
Defining a custom cursor for the page
This is usually the first cursor to implement. This cursor will be the default cursor used in the whole page. We recommend to use a arrow static pointer here.
Two methods are available. Using direct code in each page or using CSS. The main advantage of using CSS is that you can easily maintain your site and change your cursors without editing each page.
Using direct code in HTML page:
<BODY style="cursor: url('http://www.yourwebsite.com/cursors/myarrow.cur'), default">
....
</BODY>
Using CSS:
In the CSS file (e.g. "/mywebstyle.css"):
BODY {
cursor: url('http://www.yourwebsite.com/cursors/myarrow.cur'), default;
}
In the HTML file:
<HEAD>
...
<link rel="stylesheet" type="text/css" href="/mywebstyle.css"/>
...
</HEAD>
Defining a custom cursor for specific elements
This is useful to apply a custom cursor to specific elements in the page. We use CSS to implement this feature. First we define a class with the cursor in the CSS file, then we apply this class to the elements in the HTML code.
In the CSS file (e.g. "/mywebstyle.css"):
.handCursor {
cursor: url('http://www.yourwebsite.com/myhand.cur'), default;
}
In the HTML file:
<HEAD>
...
<link rel="stylesheet" type="text/css" href="/mywebstyle.css"/>
...
</HEAD>
<BODY>
...
<!-- applying the cursor on a link -->
<a href="readmore.html" class="handCursor">Click to read more</a>
...
<!-- applying the cursor on an image -->
<img src="image.gif" class="handCursor">
...
<!-- applying the cursor on a paragraph -->
<p class="handCursor">This is a paragraph text.</p>
...
</BODY>
When it comes to website customization, you must consider browser compatibility. The code on this page works for the following browsers: Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+.
We have found the following compatibility issues:
• Google Chrome: Cursor customization is supported for the whole page only. Specific elements cannor be customized. Specifying code for customizing specific elements will result in use of the standard cursor by the browser.
• Opera: Does not support custom cursors.
If you want to learn more on how to use cursors on web pages we recommend Webucator's CSS class. Webucator delivers customized onsite and instructor-led online technical training throughout the United States and worldwide.