Use cursors to customize Web sites
In relation to Axialis CursorWorkshop, this article offers information on the following topics:
- Usability considerations
- What types 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
- Browser compatibility
- Going Further
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.
Axialis CursorWorkshop
Make Static & Animated Cursors for Windows
Make your own cursors for Windows and web sites
Create professional-looking static and animated cursors to customize mouse pointers in Windows, applications and web sites.
Create animated cursors from GIF, FLI/FLC, filmstrip animations
Several built-in assistant permits creating animated cursors from existing animation files such as animated GIF, FLI/FLC Autodesk animations, RGB filmstrips with alpha channel and more.
Work efficiently with industry standards
Use plug-ins for Adobe Photoshop and Illustrator and make your cursors in a few clicks.
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.
Important
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 code embedded in HTML page:
<BODY style="cursor: url('http://www.yourwebsite.com/cursors/myarrow.cur'), default">
....
</BODY>
Using a CSS file:
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 on all major browsers. However we recommand that you check compatibility on this page on caniuse.com
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.