| Changing the Cursor... |
|
|
Using Styles to Change the Mouse PointerOccasionally you need to control the appearance of the mouse pointer (also called the "cursor"). The user will expect the cursor to change from its usual arrow to an I-beam as it passes over selectable text or, most noticeably, to a hand when it's over a hyperlink. Most users won't have noticed the I-beam, but it isn't long before every surfer knows that the hand means "click me!". Fortunately, HTML hyperlinks automatically cause the cursor to change. You don't have to do anything. But what if you want to give the "click-me" message for something that isn't a hyperlink? Perhaps it's a piece of text with a JavaScript onClick() event assigned to it. You need the cursor to change to prompt the user to click it. Click this text. You clicked the text!
You will have noticed that when you pointed at the paragraph "Click this text." your mouse pointer changed to the "hand" cursor. This was achieved by attaching a style instruction to the HTML tag enclosing the paragraph... <p style="cursor:hand">Click this text.</p> There is also some JavaScript (which I haven't shown here) to make something happen when the user clicks the text, but that isn't needed for controlling the cursor. You can apply a cursor style to all sorts of objects, such as a picture...
That one's called "crosshair". The HTML goes like this... <img src="images/itsme.jpg" style="cursor:crosshair"> The table below lists all 16 different cursor styles. The relevant style has been applied to each table cell. Point at different cells to see the result...
The style was simply applied to the each cell's HTML like this... <td width="25%" align="center" style="cursor: help">help</td> So, next time the default cursor just won't do, simply apply a different one!
|
||||||||||||||||
| ^ top | |||||||||||||||||
|
|
