Controlling the Cursor with CSS

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> 

click to view at full size.

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.



Dynamic HTML in Action
Dynamic HTML in Action
ISBN: 0735605637
EAN: 2147483647
Year: 1999
Pages: 128

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net