HTML and CSS Reference
In-Depth Information
Setting the CSS
cursor
Style
With JavaScript's event handlers, you can add mouse events such as
onclick
and
onmouseover
to any page object. Objects that are clickable should present some kind
of visual indicator to users. Hyperlinks do this by changing the style of the mouse cursor
from a pointer to a hand. You can simulate this behavior using the
CSS
cursor
style
cursor:
type
;
where
type
is the type of cursor to display when the mouse pointer hovers over or clicks
the object. For a hand pointer
, use the following
CSS
cursor
style:
cursor: pointer;
Other types of cursors include
crosshair
,
help
,
move
,
text
, and
wait
. To let the browser determine the
cursor
style, change the
type
value to
auto
. As
with other CSS styles, you can set and change the
cursor
style using the JavaScript
expression
object
.style.cursor =
type
;
for the inline style, where
type
is once again a
CSS
cursor
style type.
Displaying Browser Window Dialog Boxes
Rebecca has had a chance to work with your app. Although she likes the interface
you've designed, she's concerned that when a user switches from one puzzle to another,
his or her work on the first puzzle will be completely lost. Rebecca would like the app to
display a warning message to users, telling them that their work will be lost if they swap
puzzles.
You can create such warning messages using the built-in browser window dialog
boxes. JavaScript supports three types of dialog boxes: alert, confirm, and prompt. The
alert dialog box, which you've already seen, is created using the method
alert(
message
)
where
message
is the message displayed by the alert dialog box. For example, the
expression
alert(“Puzzle Completed!”)
displays the dialog box shown in Figure 13-29.
Figure 13-29
browser window alert dialog box
