|
|
Changing the standard cursors with DHTML and CSS
|
| Article by: |  Jeff Anderson ( 1362 ) (3/24/2002) |
|
| Summary: | The ability to alter the type of cursor has been around since IE 4 and now features in Netscape 6 too. |
|
| Viewed: 23280 times |
Rating (29 votes): |
|
3.8 out of 5 |
|
|
|
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 |
|
|
View highlighted Comments
 User Comments on 'Changing the standard cursors with DHTML and CSS '
|
|
|
Posted by :
 Archive Import (cam) at 09:44 on Sunday, August 25, 2002
|
What about adding some information in or emailing me about how to change a cursor from the default cursor to a cursor someone may have dowloaded from the Internet and using that cursor instead.
How would this be done?
Cheers.
| |
|
Posted by :
Archive Import (d) at 12:12 on Monday, August 26, 2002
|
cam -
as far as I know, the only way to do this would be something effectively like a mouse trail (see the trailing cursor example on this site) - though you'd have to modify it a bit.
| |
|
Posted by :
Archive Import (Al) at 19:56 on Wednesday, October 02, 2002
|
IE 6 shows arrows pointing both ways for the resize. Bummer.
Re the "downloaded from the Internet" question: I think you're thinking of Comet Cursor. I'd avoid that plug-in, cause when people don't have Comet they get an annoying popup demanding that they go download it.
| |
|
Posted by :
Archive Import (Ali) at 12:29 on Thursday, October 03, 2002
|
Thx for this tutorial, I realy nedeed this codes.
;-)
| |
|
Posted by :
Archive Import (Jugalator) at 14:17 on Sunday, October 06, 2002
|
IE has support for custom cursor out of the box, without plugins, but don't remember how you did it.
Something like:
A {
cursor: url('mycursor.cur')
}
| |
|
Posted by :
Archive Import (Jeanny) at 16:03 on Tuesday, December 10, 2002
|
I want to change to a custom cursor when it hovers a link.. what's the code for it?
| |
|
Posted by :
Archive Import (Rich) at 14:56 on Monday, December 16, 2002
|
Does cursor::hand work on Netscape 7.0, I just get the default when I try to use this.
| |
|
|
|
Posted by :
Archive Import (ced) at 12:11 on Wednesday, February 12, 2003
|
cursor: hand; is not a valid CSS2 style (not conformed to the W3C recommendations)
it should be:
cursor: pointer;
If people start to mess up with web standards, we'll end to loose all the benefit of device and technology independant world wide web as we know it today.
http://www.w3.org
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| |
