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.
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 “Contact Us” displays the description “Contact to eBIZ education team.”
To begin the script, you will define a function to display a message on the status line. 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 displayDescription function to display a message.
Here is the definition for this function:
<script language=”JavaScript”>
function displayDescription (description) {
window.status = text;
return true;
}
</script>
This function accepts a parameter called description. 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.
Complete code:
<html>
<head>
<title>OnmouseOverDemo</title>
<script LANGUAGE=”JavaScript”>
function displayDescription (description) {
window.status = description;
return true;
}
function clearstatus() {
window.status=””;
}
</script>
<BASE target=”_blank”>
</head>
<body>
<h1>Descriptive Links</h1>
<p>Move the mouse pointer over one of
these links to view a description on the statusbar :</p>
<ul>
<li><a HREF=”http://mail.ebizel.com”
onMouseOver=”displayDescription (‘Go to eBIZ mail’); return true”
onMouseOut=”clearstatus()”>
Chekc your email</a>
<li><a HREF=”http://education.ebizel.com”
onMouseOver=”displayDescription (‘Go to eBIZ education page’); return true”
onMouseOut=”clearstatus()”>
Learn with eBIZ.com </a>
<li><A HREF=”http://support.ebizel.com”
onMouseOver=”displayDescription (‘Go to Support Page’); return true”
onMouseOut=”clearstatus()”>
Contact Us</a>
</ul>
</body>
</html>