The cursor CSS attribute allows you to change the display of the mouse pointer, for example, from a pointing finger to a hand icon or to an arrow. This can be helpful in a variety of circumstances. If, for instance, you want to signify to the user that an image is clickable, you can set the image's cursor style to hand. Code Listing 14-3 demonstrates all the different settings for the cursor attribute. Figure 14-3 displays what the cursor looks like when it is positioned over each of the cells.
Code Listing 14-3.
<HTML> <HEAD> <TITLE>Listing 14-3</TITLE> </HEAD> <BODY> <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="4"> <TR HEIGHT="50" VALIGN="TOP"> <TD STYLE="cursor:auto">auto</TD> <TD STYLE="cursor:hand">hand</TD> <TD STYLE="cursor:move">move</TD> <TD STYLE="cursor:text">text</TD> <TD STYLE="cursor:wait">wait</TD> <TD STYLE="cursor:help">help</TD> <TD STYLE="cursor:default">default</TD> <TD STYLE="cursor:crosshair">crosshair</TD> </TR> </TABLE> <BR> <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="4"> <TR HEIGHT="50" VALIGN="TOP"> <TD STYLE="cursor:w-resize">w-resize</TD> <TD STYLE="cursor:nw-resize">nw-resize</TD> <TD STYLE="cursor:n-resize">n-resize</TD> <TD STYLE="cursor:ne-resize">ne-resize</TD> <TD STYLE="cursor:e-resize">e-resize</TD> <TD STYLE="cursor:se-resize">se-resize</TD> <TD STYLE="cursor:s-resize">s-resize</TD> <TD STYLE="cursor:sw-resize">sw-resize</TD> </TR> </TABLE> </BODY> </HTML> |
Figure 14-3. The cursor CSS attribute controls the display of the mouse pointer.
The sixteen potential values for the cursor attribute are auto, hand, move, text, wait, help, default, crosshair, w-resize, nw-resize, n-resize, ne-resize, e-resize, se-resize, s-resize, and sw-resize. They display as shown in Figure 14-3. Netscape Navigator 4 does not support this attribute.