cursor Property

The cursor property is used to define the type of cursor to be displayed over a given Web element. The purpose of this property is to draw the attention of the user to the element. It can be applied to any element on a Web page: text, images or any other objects.

There are plenty of values available for the cursor property, enabling Web authors to choose from just about the whole range of cursor types available. There are several cursor values designed to produce very specific cursor types. For example, the crosshair value is designed to display a symbol that resembles a "+". The pointer value shows a typical "pointing" cursor, which is typically a small, upper-left pointing arrow.

Then there are a number of cursors normally used to indicate that an edge or corner can be moved. These cursor values are e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize and w-resize. The letter at the beginning of each of these values designates the cardinal direction of the type of edge or corner cursor to be displayed ("e" for east, "nw" for northwest and so on).

Several cursor values are more dependent on the type of operating system being used. The move value should display the type of cursor indicating a Web element can be moved (regardless of whether it can be or not). This type of cursor is commonly displayed as a thick double line, which can be either vertically or horizontally aligned. The text value should display the type of cursor that indicates text can be selected. This type of cursor is most typically rendered as an I-bar. The wait value should display the type of cursor commonly associated with a computer's "busy-mode" cursor, indicating that the user should be patient while the operation the computer is working on is completed. A good example of this is the standard hourglass cursor. The help value should display the type of cursor associated with online help, most typically rendered as either a question mark with pointer or in a separate balloon.

If the auto value is used, the browser displays whatever type of cursor would normally be associated with the Web element. Similar to this is the default value, which displays the default "pointing" cursor for the browser (most often some form of arrow).

A URL value can also be used with cursor, which must point to some sort of cursor resource (presumably a bitmap image of the cursor), which is then loaded by the browser and displayed. The URL value can be cascaded, so that if the first cursor image can't be found, a back-up cursor can be. You can see an example of this in the following code snippet:

<h1 style="cursor: url(funkyhand.csr),url(otherhand.cur),
text">
try
scrolling over this header and see what happens!</h1>

It is worth noting that Internet Explorer 6.0 supports this property, but requires that any cursor images be either in a .cur or .ani (animated cursor) file types.

Finally, there is the inherit value, which simply takes on whatever parent value may have already been set for cursor.

This may all seem pretty straightforward, but both Microsoft and Netscape added a number of new cursor values in version 6.0 of their respective browsers. Internet Explorer 6.0 supports these additional cursor styles:

· all-scroll (produces a up/down/left/right arrow with a dot in the middle, used to indicate the content is scrollable in any direction)

· col-resize and row-resize (used to indicate that a column or row can be resized, respectively)

· no-drop (used to indicate that a dragged object cannot be dropped at the current cursor position)

· not-allowed (indicates that the intended action is not allowed)

· progress (shows that a background process is running)

· vertical-text (indicates that the vertical text is editable)

· hand (displays a hand icon; first implemented in version 4).

Netscape Navigator 6.0 also supports a number of custom cursor types, and these are:

· alias (shows that a shortcut or alias to some other object is available)

· cell (indicates that one or more spreadsheet cells are available)

· copy (specifies that the content can be copied)

· grab and grabbing (the first shows that an object can be "grabbed," and the second shows that it has been "grabbed" and is ready to be moved)

· spinning (used to indicate that a process is going on, but, unlike with "wait", the user interface is still available for use)

Netscape Navigator 6.0 is also supposed to support three other custom cursors — count-down, count-up and count-up-down, indicating that the program is counting down, up, or both in succession, respectively — but they do not appear to work, or have perhaps been discarded in subsequent releases of the browser. It is notable also that the Mozilla browser supports all of the Netscape Navigator-style cursor types — though none of the Internet Explorer types — as well.