HTML and CSS Reference
In-Depth Information
HANDS-ON PRACTICE 14.3
Let's practice using the
onmouseover
and
onmouseout
event handlers and alert
messages to indicate when the event handler has been triggered. We will use simple
hypertext links, and embed the event handlers in the
<a>
tags. We will not need the
<script>
block since event handlers are placed as attributes in the XHTML tags. We'll
place the hypertext links in a table so that there's lots of room in the browser window
to move the mouse pointer and test our script.
Open a text editor and enter the text as shown in the following code. Note the use of
the double and single quotes in the
onmouseover
and
onmouseout
event handlers. We
need quotes around the message in the
alert()
method, and we need quotes encapsu-
lating the JavaScript for the event handler. XHTML and JavaScript will allow us to use
either double quotes or single quotes. The rule is that they must match. So when you
have a situation where you need two sets of quotes, you can use double and single. In
this case, we have used double quotes for the outer set and single quotes for the inner
set. In the anchor tag, the
"#"
symbol is used for the
href
value because we don't need
the functionality of loading another Web page. We need the hypertext link to sense
mouseover and mouseout events.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JavaScript Practice</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Using JavaScript</h1>
<ul>
<li>
<a href="#" onmouseover="alert('You moused over');">
Mouseover test</a>
</li>
<li>
<a href="#" onmouseout="alert('You moused out');">Mouseout test</a>
</li>
</ul>
</body>
</html>
Save this file as mouseovertest.html and load it in the browser. Move your mouse on
top of the Mouseover test link. As soon as your mouse touches the link, the mouseover
event occurs and the
onmouseover
event handler is triggered. This displays the alert
box, as shown in Figure 14.11.
Click the OK button and position your mouse pointer over the Mouseout test link.
Notice that nothing happens. This is because the mouseout event has not occurred yet.
Search WWH ::
Custom Search