HTML and CSS Reference
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-
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"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<a href="#" onmouseover="alert('You moused over');">
<a href="#" onmouseout="alert('You moused out');">Mouseout test</a>
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.