There are a lot of articles on the web that deal with basic intros and how-tos. So I’ll skip the chatter and get right down to it. This article requires basic knowledge of HTML and CSS.
You define the cursor property like so:
cursor: pointer;
or
cursor: default;
here’s a quick list of possible cursor values:
| URL | A comma separated of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used |
| auto | Default. The browser sets a cursor |
| crosshair | The cursor render as a crosshair |
| default | The default cursor |
| e-resize | The cursor indicates that an edge of a box is to be moved right (east) |
| help | The cursor indicates that help is available |
| move | The cursor indicates something that should be moved |
| n-resize | The cursor indicates that an edge of a box is to be moved up (north) |
| ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) |
| nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) |
| pointer | The cursor render as a pointer |
| progress | The cursor indicates that the program is busy (in progress) |
| s-resize | The cursor indicates that an edge of a box is to be moved down (south) |
| se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) |
| sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) |
| text | The cursor indicates text |
| w-resize | The cursor indicates that an edge of a box is to be moved left (west) |
| wait | The cursor indicates that the program is busy |
| inherit | Specifies that the value of the cursor property should be inherited from the parent element |
To define a custom cursor image to be your cursor, you use the value URL with a path to your custom image like so:
cursor: URL(‘mycursor.cur’);
Like everything else in CSS a path may be absolute or relative.
But wait, there’s more. This doesn’t make it cross-browser compliant. This will not render your cursor properly on Mozilla Firefox, Safari and MSIE. Read on for the work around.
For MSIE
cursor: URL(‘mycursor.cur’), default;
This actually doesn’t make any sense but that’s just how you can get it to work on Firefox.
——-
http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/
http://www.ajaxblender.com/howto-create-custom-image-cursors.html
