The ability to alter the type of cursor has been around since IE 4 and now features in Netscape 6 too.
First let's see what we're talking about with a few examples. Hover the mouse over the links below:
Cursor=help
Cursor=wait
Cursor=auto
Cursor=move
Cursor=text
Cursor=crosshair
Cursor=default
Cursor=n-resize
Pretty neat huh? There are various common uses of these, including making a link less obvious my removing the standard Pointing
hand (often a marketing ploy this one), and in combination with other DHTML tricks like moving objects around the screen. They can give the browser a more
believable 'application' style feeling if used well.
Note that if you have a desktop theme going you will see the equivalent of these - my old computer used to have monkeys, snakes and all sorts.
But most people will see the standard cursors.
There are two ways to achieve the cursor changes. One is simply to set the style within the specific A tag:
<a href="http://www.codetoad.com/help" style="cursor:help">Click here for help</a>
|
|
|
The other way is to set it in the overall style sheet, refering to a particular class:
A.CLASSNAME {cursor: help; }
|
|
|
Then you simply reference the class in the link :
<a href="http:www.codetoad.com" class="CLASSNAME">Help</a>
|
|
|
Finally, here's the complete list of cursor options. Hover over the left column to view the result.
| cursor: auto |
The Default cursor |
| cursor: crosshair |
Plus Sign |
| cursor: default |
Default Pointer |
| cursor: hand |
The normal Link Hand |
| cursor: wait |
Hourglass |
| cursor: text |
Vertical beam for text selection |
| cursor: help |
Arrow with a question-mark |
| cursor: move |
Crosshair with Arrows on the Ends |
| cursor: n-resize |
Arrow Pointing North |
| cursor: s-resize |
Arrow Pointing south |
| cursor: e-resize |
Arrow Pointing east |
| cursor: w-resize |
Arrow Pointing west |
| cursor: ne-resize |
Arrow Pointing North-east |
| cursor: nw-resize |
Arrow Pointing North-west |
| cursor: se-resize |
Arrow Pointing south-east |
| cursor: sw-resize |
Arrow Pointing south-west |
|
Useful Links
|
|
