Applying onMouseOver To Your Links - Page 2

Now that you know how to use onMouseOver, it's time to learn about the code that follows it:

"window.status =
    'Click here to see the catalog page for this book'; return true;"

The code tells the browser's status bar (window.status, as JavaScript knows it) to display the text "Click here to see the catalog page for this book". That's really all there is to it, but there are several things to notice even in this simple code:

• This code is enclosed in double quotes, which are used as a way of indicating where the code starts and where it stops. This, too, should be a familiar construct, since we use double quotes in HTML to indicate the beginning and end of a value (e.g., <a href="page.html">).

• window.status is JavaScript's way of referring to the status bar. It actually refers to the status property of the window object. We'll discuss what these terms mean later in this chapter.

• The equal sign here is used to assign a value to window.status, giving it a string of text to display.

• The text after the equal sign is enclosed in single quotes. Again, we use the quotes to indicate the beginning and end of the value, but here we use single quotes instead of double quotes. That's because the text occurs inside the double-quoted JavaScript string. If we used double quotes for the link description, the JavaScript interpreter would think that the JavaScript code ended with the second double-quote character. Whenever you're nesting a string inside another string, you must alternate between single and double quotes.

• The semicolon after the description text indicates the end of a line of JavaScript. Get used to seeing semicolons; virtually every line of JavaScript ends in a semicolon.

So far so good, but what are the words return true; at the end of this code? For now, it's enough to know that it's some magic required to keep the browser from doing its normal job of displaying the URL in the status bar. If those words weren't there, the user would never see our status bar message, because it would be immediately overwritten by the URL. We'll discuss this return feature in more detail in a number of scripts later in the book.

To apply this technique to your site, just replace the text between the single quotes (and the URL and content, of course).

If you've tried this script, you've probably noticed that the text in the status bar doesn't go away when you move the mouse out of the link. To solve this problem, we need to add a second event handler, for onMouseOut events, to the link, as shown in Example 1-2.

Example 1-2: Improved code for adding status bar text to a link

<a href="http://www.oreilly.com/catalog/learncocoa/"
  onMouseOver="window.status =
    'Click here to see the catalog page for this book';
    return true;"
  onMouseOut="window.status = '';">
<img width="44" height="100" border="0" src="learning_cocoa.gif"></a>

The code for the onMouseOut event handler simply sets window.status to an empty string (''). The onMouseOutevent handler is triggered when the mouse moves out of the link, so this effectively erases the text in the status bar.

Diving into JavaScript
Designing with JavaScript, 2nd Edition
Night and Day - Page 3