CSS: The Definitive Guide, 3rd Edition (60 page)

Figure 13-2. Changing the cursor's icon

cursor

The value
pointer
changes the cursor icon to be the same as when the user moves the cursor over a
hyperlink. You can even describe this behavior for HTML
documents:

a[href] {cursor: pointer;}

With
cursor
, any element can be defined to change
the icon as though it were a link. This can be very confusing to the user, so I
don't recommend doing it often. On the other hand (so to speak),
cursor
makes it much easier to create interactive,
script-driven screen widgets out of non-link elements and then change the icon
appropriately, as illustrated by
Figure
13-3
.

Figure 13-3. Indicating an element's interactivity

#example {cursor: pointer; cursor: hand;}

The other cursor icon very common to web browsing is the
text
icon, which appears in situations where the user
is able to select text. This is typically an "I-bar" icon, and serves as a visual
cue that the user can drag-select the content under the cursor.
Figure 13-4
shows a text icon at the end
of some already selected text.

Figure 13-4. Selectable text and the text cursor

Another way to indicate interactivity is to use the value
crosshair
, which changes the cursor icon into, well,
a crosshair symbol. This is typically a pair of short lines at a 90-degree angle
to each other, one vertical and the other horizontal, looking rather like a plus
(
+
) sign. However, a crosshair could also
resemble a multiplication sign (or a lowercase "x") or even an icon similar to the
display inside a rifle scope. Crosshairs are usually used with screen-capture
programs, and they can be useful in situations where the user is expected to know
exactly which pixel is being clicked.

In many circumstances, the
value
move
will yield a result similar to
crosshair
.
move
is used in situations where the author needs to indicate that a
screen element can be moved, and it is often rendered like a thick crosshair with
arrowheads on the ends of the lines. It may also be rendered as a "gripping hand"
whose fingers curl when the user clicks and holds the mouse button. Two possible
move
renderings are shown in
Figure 13-5
.

Figure 13-5. Differing icons for move

Then there are the various
cursor
values related to
move
:
e-resize
,
ne-resize
, and so on. Windows and most graphical Unix-shell users will
recognize these as the icons that appear when the mouse cursor is placed over the
side or corner edges of a window. For example, placing the cursor over the right
side of the window will bring up an
e-resize
cursor, indicating that the user can drag the right side of the window back and
forth to change the window size. Putting the cursor over the lower-left corner
invokes the
sw-resize
cursor icon. There are
many different ways to render these icons;
Figure 13-6
shows a few of the possibilities.

Figure 13-6. A selection of "resize" cursors

Both
wait
and
progress
indicate that the program is busy. However, they're not
identical:
wait
means the user should wait
until the program isn't as busy, while
progress
indicates that the user should feel free to continue interacting with the program,
even though it's busy. On most operating systems,
wait
is either a watch (possibly with spinning hands) or an hourglass
(possibly turning itself over every so often).
progress
is typically represented as a spinning "beach ball" or an
arrow with a small hourglass off to one side.
Figure 13-7
shows some of these icons.

Figure 13-7. Waiting versus progressing

In situations where the
author wants to indicate that the user can get some form of help, the value
help
is the answer. Two very common
renderings of
help
are a question mark and an
arrow with a small question mark next to it.
help
can be very useful if you have classed certain links that point to
more information or to information that will help the user understand the web page
better. For
example:

a.help {cursor: help;}

You
can also use
help
to indicate that an element
has "extra" information, such as
acronym
elements with
title
attributes. In many user
agents, leaving the cursor over a titled acronym will cause the user agent to show
the contents of the
title
attribute in a "tool
tip." However, users who move the cursor around quickly, or who have slow
computers, may not realize the extra information is there if the cursor didn't
change. For such users, the following rule could be useful, and will lead to a
result like that shown in
Figure
13-8
:

acronym[title] {cursor: help; border-bottom: 1px dotted gray;}

Figure 13-8. Showing that help (in the form of more information) is available