Changing the Mouse Pointer's Appearance Normally, the mouse pointer's appearance is determined by the browser. The browser changes the mouse pointer's appearance according to the content over which the pointer currently happens to be resting. If the pointer is over text, for example, the pointer becomes a text selector. Or if the browser is working and the visitor can't do anything, the pointer becomes a timer, letting visitors know they need to wait. Sometimes, it's useful to override the browser's behavior and set the appearance of the pointer yourself, using the cursorproperty (Table 8.5). Table 8.5. Cursor ValuesVALUE | COMPATIBILITY |
|---|
<cursor type name> | IE4, N6, S1, O7, CSS2 | <URL> | CSS2 | auto | IE4, N6, S1, O7, CSS2 | none | IE4, N6, S1, O7, CSS2 |
In this example (Figures 8.8, 8.9, and 8.10), I've set up different pointer types that depend on the type of object or link over which the pointer is hovering. Figure 8.8. A right-pointing arrow is used for menu navigation. 
Figure 8.9. When the mouse pointer passes over the help link, a question mark displays. 
Figure 8.10. When the mouse pointer is over an image, it changes to the crosshair cursor. 
To set the mouse pointer's appearance: 1. | cursor:
Type the cursor attribute, followed by a colon (:), in the CSS declaration block (Code 8.5).
Code 8.5. Because the link leads to a help screen, I've set the help class to change the cursor appearance to the help pointer. In addition, images will have a crosshair pointer, and the navigation will use a pointer that is generally used when selecting an area of an image.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Changing the Mouse Pointer's Apperance</title> <style type="text/css" media="screen"> h1, h2 { color: #999; } h2 { clear: both; } img { cursor: crosshair; margin: 4px; display: block; } a { color:red; } #navigation { margin: 0px 16px 8px 0px; background-color: #ccc; float: left; font: x-small Arial, Helvetica, sans-serif; } #navigation a { padding: 2px 4px; border-top: 3px solid #fff; text-decoration: none; display: block; color: red; } #navigation a:hover { cursor: e-resize; border-top: 3px solid #999; color: red; background-color: #fff; } #copy { clear: both; } .chapterTitle { display: block; font-size: smaller; color: black; } .dropBox { width: 208px; padding: 6px; border: 3px solid #f66; margin: 0px 0px 8px 8px; float: right; font: small Arial, Helvetica, sans-serif; } .help { cursor: help; } </style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale</a> <a href="#">The Rabbit Sends in a Little Bill</a> <a href="#">Advice from a Caterpillar</a> <a href="#">Pig and Pepper</a> <a href="#">NEXT ⇒</a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <b >Lewis Carroll</b> <h2>CHAPTER VIII <span >The Queen's Croquet-Ground</span></h2> </div> <div > <div > <img src="/books/3/292/1/html/2/alice30.gif" height="272" width="200" alt="Alice in Wonderland" /> The chief difficulty Alice found at first was in managing her flamingo.</div> <p>A large rose-tree stood near the entrance of the garden...</p> <p>'I couldn't <a href="#">help</a> it,' said Five, in a sulky tone; 'Seven jogged my elbow.'</p> </div> </body></html>
|
| | | 2. | crosshair;
Type one of the mouse-pointer names listed in Table 8.6 to specify the pointer's appearance. Alternatively, type one of these other values for cursor.
auto if you want the browser to decide which mouse pointer to use. none if you want the cursor to disappear altogether. url and the location of a graphic to use as a custom cursor; this can be either the complete Web address or the local file name of the image.
Table 8.6. Cursor TypesNAME | APPEARANCE (VARIES DEPENDING ON OS) |
|---|
crosshair | 
| e-resize | 
| hand[*] | 
| help | 
| move | 
| ne-resize | 
| n-resize | 
| nw-resize | 
| pointer | 
| progress | 
| se-resize | 
| s-resize | 
| sw-resize | 
| text | 
| wait | 
| w-resize | 
|
[*] IE only; same as pointer
|
 Tips
In theory, you can use any Web graphic (GIF, PNG, or JPEG), as a custom cursor by specifying the URL for the image file. Unfortunately, this does not work in any browsers except Internet Explorer, which supports .cur or.ani file types for custom cursors. Remember that the exact appearance of the cursor depends on the operating system and the Web browser being used. Although it's fun to play around with switching the mouse pointers, I've tested this feature on my own Web site and have gotten several e-mails asking me to cut it out. Most Web users have learned to recognize what particular pointers are for and when they should appear. Breaking these conventions tends to confuse people.
|
