Recipe 3.4 Changing Cursors

< Day Day Up >

Recipe 3.4 Changing Cursors

Problem

You want to change the cursor when the mouse pointer rolls over a link, as in Figure 3-3.

Figure 3-3. The wait cursor represented by a watch icon

Solution

Use the cursor property to change the cursor:

a:link, a:visited {

 cursor: move;  

}

Discussion

The cursor property can take multiple values, as listed in Table 3-2. However, support for these values varies from browser to browser. Opera 7 and Internet Explorer for Windows 5.5+ support the cursor property. While Netscape Navigator 6+ supports most values, the browser doesn't support the uri. Also, in Navigator the cursor property isn't inherited to child elements from the parent.

Table 3-2. Cursor property values and their descriptions

Value

Description

Sample

auto

The cursor changes to an image that is determined by the browser.

crosshair

Two perpendicular lines intersecting in the middle; this is similar to an enlarged plus sign.

default

Platform-dependent cursor that in most browsers is rendered as an arrow. Browser vendors or computer operating systems may dictate a different cursor style.

pointer

Used to illustrate that the mouse pointer is over a link; sometimes rendered as a hand with an extended index finger. Browser vendors or computer operating systems may dictate a different cursor style.

move

Illustrates that an element can be moved; sometimes rendered as a crosshair with arrowheads on the tips or a five-fingered hand.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize,s-resize, w-resize

An arrow illustrating the direction in which a side can be moved; for example, se-resize indicates a southeast direction.

text

Illustrates that text can be edited; sometimes rendered like an I-beam commonly used in word processing programs.

wait

Illustrates that the computer is busy; sometimes rendered as an hourglass.

progress

Illustrates that the computer is busy, but the user still can interact with the browser.

help

Illustrates that information or help is available, often at the destination of the link; sometimes rendered as a question mark or an arrow with a question mark.

<uri>

The cursor can be swapped with an externally defined cursor like an image, Windows cursor file, SVG cursor, etc.

N/A

The code to include a custom cursor is similar to that used to set a background image on an element:

a.help:link , a.help:visited{

 cursor: url(bewildered.gif);

}

While employing different cursors most users will find changes to their routine surfing habits between a whimsical annoyance and an extreme aggravation, depending on how excessive your implementation is. (This reaction can be noted as being similar to the use of the blink property in Recipe 3.7.) Therefore, change the cursor a user is accustomed to seeing at your own risk.