Custom CSS Cursors
Using CSS, you can change the default cursor icon associated with a
particular element, even specifying your own cursor image (in IE6+)
instead. However, with power comes responsibility. Modify the cursor only
when it makes sense to, such as when you're applying it to a custom
interface. Like popup windows of JavaScript, changing cursors can quickly
become counterproductive and irritating to the user.
Below lists all the available values for the CSS property "cursor" (as of
CSS2.1):
| Icon |
Value |
Live example (move mouse
over box) |
Browser |
| |
auto |
The User Agent determines the cursor to display
based on the current context. |
All |
 |
default |
style="cursor:
default;" |
All |
 |
hand |
style="cursor: hand;" |
IE |
|
|
pointer |
style="cursor:
pointer;" |
NS6/ IE6 |
|
|
hand & pointer |
style="cursor: pointer; cursor: hand;" |
Cross browser |
 |
crosshair |
style="cursor:
crosshair;" |
All |
 |
text |
style="cursor: text;" |
All |
 |
wait |
style="cursor: wait;" |
All |
 |
help |
style="cursor: help;" |
All |
| |
inherit |
Takes on its parent element's computed cursor
value. |
All |
 |
move |
style="cursor: move;" |
All |
 |
e-resize |
style="cursor:
e-resize;" |
All |
 |
ne-resize |
style="cursor:
ne-resize;" |
All |
 |
nw-resize |
style="cursor:
nw-resize;" |
All |
 |
n-resize |
style="cursor:
n-resize;" |
All |
 |
se-resize |
style="cursor:
se-resize;" |
All |
 |
sw-resize |
style="cursor:
sw-resize;" |
All |
 |
s-resize |
style="cursor:
s-resize;" |
All |
 |
w-resize |
style="cursor:
w-resize;" |
All |
 |
progress |
style="cursor:
progress;" |
IE6 |
 |
all-scroll |
style="cursor:
all-scroll;" |
IE6 |
 |
col-resize |
style="cursor:
col-resize;" |
IE6 |
 |
no-drop |
style="cursor:
no-drop;" |
IE6 |
 |
not-allowed |
style="cursor:
not-allowed;" |
IE6 |
 |
row-resize |
style="cursor:
row-resize;" |
IE6 |
 |
url(uri) |
style="cursor: url(mycursor.cur);"
Note: Only .cur and .ani file types are supported
as of IE6. |
IE6 |
 |
vertical-text |
style="cursor:
vertical-text;" |
IE6 |
Using the "cursor" property is like with any CSS property- simply apply
it to the desired element. Here are a few examples:
Example #1:
<style type="text/css">
body{
cursor: url(mycursor.cur)
}
</style>
This changes the default arrow cursor of a webpage to a custom image
instead.
Example #2:
<div style="cursor: move; width: 200px; height: 200px"></div>
<a href="help.htm" style="cursor: help;">Help</a>
In this second example, the entire DIV has a cursor of "move", and the link
that follows, a "help" cursor.
 Changing the
cursor dynamically using JavaScript
As if the above isn't enough, you can change the cursor on the fly using
JavaScript (as with most CSS properties). Simply use the syntax:
element.style.cursor="new_cursor_value"
Example #3 (disable text selection on the page): This last example
disables text selection on the page in IE5+, and to make the process more
intuitive, changes the cursor to "not allowed" while the user is dragging
the mouse to try and select text:
<body onSelectStart="this.style.cursor='not-allowed'; return false;"
onMouseup="this.style.cursor='default'">
Simulated example. Try dragging inside this DIV. IE5+ required.
And with that we come to an end of the tutorial.
|
