Custom
Cursors
Custom Cursors
So is the pointing hand not enough for your links? In this article, I will tell you how to change the cursor that is displayed over your links. This requires a browser with support for CSS2, such as IE4 or higher. And now on to the how-to! For custom cursors (cursors that are placed on the server), you need IE6 or higher.
Links
Hover over the link: here. If you see a picture of Jim running, you have support for animated, non-animated, and pre-defined cursors. If you see a blue arrow pointing up, you have support for standard and pre-defined cursors. If you four arrows pointing up, down, left, and right, you have support for pre-defined cursors. If you see a hand and/or your pre-defined link cursor, you do not have support for CSS2. You can only test what your browser supports. Also, you may want to wait for the cursor to load. Many times the server is slow. And now for some code snippets.
Animated and Non-Animated Cursors
Animated and non-animated cursors can be put on any page the same way in both cases. The first example involves an animated cursor and non-animated cursor defined within the <HEAD> tags.
<STYLE TYPE="text/css">
A:hover {url("animate.ani"),url("noanim.cur");}
A {url("animate.ani"),url("noanim.cur");}
</STYLE>
As you can see, there are two cursors named. The first is the first cursor tried, which in this example is an animated cursor. The second is the second cursor tried, if the first does not work. This process continues for as many cursors as are listed. If none of the cursors work, the default cursor will be used.
There is a reference for the standard link because this is handled when the mouse first passes over the link. If no "A" is provided, the link will not have a different cursor. If no "A:hover" is provided, you will see the "A" cursor flash, or change when you move the mouse around a link.
Pre-Defined Cursors
If you want to use the same types of cursors that are on the viewers' computers, then you can use pre-defined cursors. The following is a table of the names of the pre-defined cursors and what they should show (hover over the text "Hover").
| Cursor Type | Description | Appears As |
| all-scroll | (IE6+) Arrows pointing up, down, left and right. Equivalent to pushing on a scrolling mouse button. | Hover |
| auto | Browser decides cursor on current context. If the text is a link, a link's cursor will be used. | Hover |
| col-resize | (IE6+) Arrows pointing left and right with a bar separating them. | Hover |
| crosshair | Simple crosshair consisting of two lines that form a plus sign (+) | Hover |
| default | The standard cursor, such as an arrow. | Hover |
| hand | Hand with the index finger pointing up, standard for links. | Hover |
| help | Arrow with a question mark. | Hover |
| move | Arrows pointing up, down, left, and right, indicating the object can be moved. | Hover |
| no-drop | (IE6+) Hand with a small circle with a line through it, indicating an object cannot be dropped at the current location. | Hover |
| not-allowed | (IE6+) Circle with a line through it, indicating that the requested action will not be carried out. | Hover |
| pointer | See "hand". | Hover |
| progress | (IE6+) Arrow with an hourglass, indicating a process running in the background. | Hover |
| row-resize | (IE6+) Arrows pointing up and down with a bar separating them. | Hover |
| text | I-bar indicating text. | Hover |
| url(uri) | See "Animated and Non-Animated Cursors". | Hover |
| vertical-text | (IE6+) Rotated I-bar, indicating vertical-text. | Hover |
| wait | Hourglass or watch, indicating that a process needs time to complete. | Hover |
| n-resize | Arrows pointing up and down, indicating that the object can be resized in this direction. | Hover |
| s-resize | Arrows pointing up and down, indicating that the object can be resized in this direction. | Hover |
| ne-resize | Arrows pointing up and right/down and left, indicating that the object can be resized in this direction. | Hover |
| sw-resize | Arrows pointing up and right/down and left, indicating that the object can be resized in this direction. | Hover |
| nw-resize | Arrows pointing up and left/down and right, indicating that the object can be resized in this direction. | Hover |
| se-resize | Arrows pointing up and left/down and right, indicating that the object can be resized in this direction. | Hover |
| e-resize | Arrows pointing left and right, indicating that the object can be resized in this direction. | Hover |
| w-resize | Arrows pointing left and right, indicating that the object can be resized in this direction. | Hover |
The following is an example where a link's cursor is the user's default help cursor:
<STYLE TYPE="text/css">
A {help;}
A:hover {help;}
</STYLE>