|
One of the most common uses for an event handler is to display descriptions of links when the user moves the mouse over them. For example, moving the mouse over the Order Form link might display a message such as "Order a product or check an order's status".
Link 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.
By the Way
This example uses the innerHTML property to display the descriptions within a heading on the page. See Hour 13 for a complete description of this property.
This will also be an example of defining event handlers entirely with JavaScript. The HTML document, shown in Listing 9.4, does not include any <script> tags or event handlersthe only thing it requires is some id attributes on the objects we will be using in the script.
Listing 9.4. The HTML Document for the Descriptive Links Example
<html>
<head>
<title>Descriptive Links</title>
</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" id="order">Order Form</a>
<li><a href="email.html" id="email">Email</a>
<li><a href="complain.html" id="complain">Complaint Department</a>
</ul>
<h2 id="description"></h2>
<script language="JavaScript" type="text/javascript"
 src="linkdesc.js">
</script>
</body>
</html>
|
This document defines three links in a bulleted list. Each <a> tag is defined with an id attribute for the script to use to attach an event handler. The <h2> tag with the id value description, currently blank, will be used to display a description of each link.
By the Way
Notice that the <script> tag is below the content of the HTML document. It would not work at the top of the document because the objects the script uses are not yet defined. You can also deal with this issue by using an onLoad event handler instead of a simple script to set up the event handlers.
The script will begin with a function to serve as the onMouseOver event handler for the links:
function hover(e) {
if (!e) var e = window.event;
// which link was the mouse over?
whichlink = (e.target) ? e.target.id : e.srcElement.id;
// choose the appropriate description
if (whichlink=="order") desc = "Order a product";
else if (whichlink=="email") desc = "Send us a message";
else if (whichlink=="complain") desc = "Insult us, our
products, or our
families";
// display the description in the H2
d = document.getElementById("description");
d.innerHTML = desc;
}
The hover function uses the target or srcElement properties to find the target object for the link, and then finds its id attribute. Three if statements evaluate the id and choose an appropriate description. Finally, the script uses the getElementById() method to find the <h2> tag that will display the descriptions, and displays the description using the innerHTML property.
Did you Know?
The conditional statement on the third line of the hover function checks whether the target property exists, and if not, it uses the srcElement property. This is called feature sensingdetecting whether the browser supports a featureand is explained further in Hour 15, "Unobtrusive Scripting."
One more function will be required. The cleardesc() function will serve as the onMouseOut event handler and clear the description when the mouse is no longer over one of the links.
function cleardesc() {
d = document.getElementById("description");
d.innerHTML = "";
}
Now that the functions are defined, you need to set them as the event handlers for the links. Each link requires the following three lines of code:
orderlink = document.getElementById("order");
orderlink.onmouseover=hover;
orderlink.onmouseout=cleardesc;
After using getElementById() to find the object with the id attribute "order", this sets up the hover() and cleardesc() functions as its onMouseOver and onMouseOut event handlers. This will need to be repeated for the other two links. Putting all of this together, the complete JavaScript file for this example is shown in Listing 9.5.
Listing 9.5. The JavaScript File for the Link Descriptions Example
function cleardesc() {
d = document.getElementById("description");
d.innerHTML = "";
}
function hover(e) {
if (!e) var e = window.event;
// which link was the mouse over?
whichlink = (e.target) ? e.target.id : e.srcElement.id;
// choose the appropriate description
if (whichlink=="order") desc = "Order a product";
else if (whichlink=="email") desc = "Send us a message";
else if (whichlink=="complain") desc = "Insult us, our
products, or our
families";
// display the description in the H2
d = document.getElementById("description");
d.innerHTML = desc;
}
// Set up the event handlers
orderlink = document.getElementById("order");
orderlink.onmouseover=hover;
orderlink.onmouseout=cleardesc;
emaillink = document.getElementById("email");
emaillink.onmouseover=hover;
emaillink.onmouseout=cleardesc;
complainlink = document.getElementById("complain");
complainlink.onmouseover=hover;
complainlink.onmouseout=cleardesc;
|
To test the script, store it as linkdesc.js in the same folder as the HTML document, and load the HTML file into a browser; this script should work on any JavaScript-capable browser. Internet Explorer's display of the example is shown in Figure 9.3.
Did you Know?
As usual, you can download the listings for this hour from this book's website.
| 
