- Understanding Event Handlers
- Using Mouse Events
- Using Keyboard Events
- Using the onLoad and onUnload Events
- Workshop: Adding Link Descriptions to a Web Page
- Summary
- Q&A
- Quiz
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Workshop: Adding Link Descriptions to a Web Page
One of the most common uses for an event handler is to display a message on the status line when the user moves the mouse over a link. For example, moving the mouse over the Order Form link might display a message like "Order a product or check an order's status" on the status line.
Status line descriptions like these are typically displayed with the onMouseOver event handler. You will now create a script that displays messages in this manner and clears the message using the onMouseOut event handler. You'll use functions to simplify the process.
NOTE
When you use this technique, your status line message will replace the URL that is usually displayed there. Make sure your description is at least as useful as the URL. All too often, Web designers use this technique to display a redundant message: For example, a link labeled "Order Form" displays the description "Goes to the Order Form."
To begin the script, you will define a function to display a message on the status line. Although you don't need to use a function, it makes your job a bit easier. For example, a link with an event handler that displays a message on the status line might look like this:
<a href="order.html" onMouseOver="window.status='Order a product'; return true;"> Order Form</a>
In this example, the return true statement is necessary to prevent the status message from being overwritten immediately by the URL display. As you can see, this makes the <a> tag complicated—and there isn't even a way to clear the message.
Using a function simplifies the link tags slightly. More importantly, it will make it easy to add other features (such as graphics) at a later time. You will call the describe function to display a message. Here is the definition for this function:
<script LANGUAGE="JavaScript" type="text/javascript">
function describe(text) {
window.status = text;
return true;
}
</script>
This function accepts a parameter called text. The contents of this variable are placed on the status line. Because the function returns a true value, the status line will continue to display this message until it is cleared. To clear the message, you can create a small function, clearstatus, to call using the onMouseOut handler:
function clearstatus() {
window.status="";
}
Last but not least, your HTML document needs to include the actual links, with the appropriate event handlers to call these two functions. Listing 10.2 shows the complete HTML document with three typical links.
Listing 10.2 The complete descriptive links example
<html>
<head>
<title>Descriptive Links</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function describe(text) {
window.status = text;
return true;
}
function clearstatus() {
window.status="";
}
</script>
</head>
<body>
<h1>Descriptive Links</h1>
<p>Move the mouse pointer over one of
these links to view a description:</p>
<ul>
<li><a HREF="order.html"
onMouseOver="describe('Order a product'); return true;"
onMouseOut="clearstatus();">
Order Form</a>
<li><a HREF="email.html"
onMouseOver="describe('Send us a message'); return true;"
onMouseOut="clearstatus();">
Email</a>
<li><A HREF="complain.html"
onMouseOver="describe('Insult us, our products, or our families'); return true;"
onMouseOut="clearstatus();">
Complaint Department</a>
</ul>
</body>
</html>
In this example, the functions are defined in the header portion of the document. Each link includes onMouseOver and onMouseOut event handlers to call the two status line functions.
To test the script, load it into a browser; this script should work on any JavaScript-capable browser. Internet Explorer's display of the example is shown in Figure 10.2.
){kind=link}
TIP
As usual, you can download the listings for this chapter from this book's Web site: http://www.jsworkshop.com.
Figure 10.2. Internet Explorer's display of the descriptive links example.