294 HOW: The Joy of JavaScript: The Dreaded Text Rollover

Figure 11.1

The status bar text rollover in action at the personal site of Derek Powazek. Placing the mouse over DESIGN FOR COMMUNITY in the menu bar causes the phrase [DESIGN FOR COMMUNITY] to appear in the status bar at the bottom left of the browser. By mastering the basic text rollover, even beginners can emulate at least one Powazek design trick (www.powazek.com).

THE DREADED TEXT ROLLOVER

Problem: Your client is insane about branding. In his restaurants, he brands everything from the napkins to the silverware. He expects the same level of branding on his site.

Solution: The JavaScript text rollover lets you brand even HTML links (see Figure 11.1).

Visit a typical site, and hold your mouse cursor over a link. You usually see something like this:

http://www.fashionmaven.com/fashions/men/index.html

Not terribly interesting, not very informative for the average citizen, and it certainly won’t help your brand-happy client. How much better would it be if the visitor saw a message like this?

FASHION MAVEN fashions for men.

Taking Your Talent to the Web

295

Many visitors might find this message far more useful than a bare-naked URL. And your client would certainly dig it. Fortunately, it is easy to accommodate these visitors and your client with JavaScript. Text rollovers are one of the easiest effects you can possibly create.

First, let’s look at a typical HTML link:

Explore FASHION MAVEN <a href=”/fashions/men/”>fashions for men</a>.

Notice that we’ve used an absolute link, as explained in Chapter 8, “HTML, The Building Blocks of Life Itself.” There is no need to waste bandwidth by including http:// or the company’s domain name in the link; both the http:// and the domain name are understood. There is also no need to waste bandwidth on “index.html” because the systems administrator will have configured the server to display index.html when no other document is specified. (Some systems administrators specify welcome.html or index.htm or default.htm instead, but the same rules apply. If default.htm is the default document on your server, you can link to it without typing it. But we digress.)

A visitor dragging her mouse over such a link will see the page’s URL and nothing more:

http://www.fashionmaven.com/fashions/men/index.html

Let’s give the visitor something more informative than the page’s URL.

The Event Handler Horizon

Built into JavaScript are two powerful event handlers: onMouseOver and onMouseOut. Event handlers enable you to create functions that take place during an event. In this case, the event is that the visitor is dragging her mouse cursor over a link—pretty simple stuff.

Many event handlers are built into JavaScript, but these are the two that will help us right now. Let’s take the link just listed and make it more illuminating using JavaScript’s onMouseOver event handler:

Explore FASHION MAVEN <a href=”/fashions/men/” onMouseOver =”window.status=’FASHION MAVEN fashions for men.’; return true;”>fashions for men</a>.

296 HOW: The Joy of JavaScript: The Dreaded Text Rollover

What is going on here?

We’ve used the onMouseOver event handler to tell the browser that something is supposed to happen when the visitor’s mouse hovers over this link. The event handler is followed by the equal sign in the same way that links and other standard bits of HTML use the equal sign.

As you may have guessed, window.status is JavaScript’s charming way of referring to the status bar at the bottom of the web page. (The status bar is the part of the browser that usually displays the bare-naked URL, generally at the lower left.) Without getting too hairy, JavaScript gives each object in its document model an address based on the object’s position within the document’s hierarchy, moving from the top level of the hierarchy down to the details: window is a top-level object; status is the object being modified via JavaScript. (Like we said, buy the JavaScript books if you want a better explanation, and you probably do.)

Notice that the status bar message text ‘FASHION MAVEN fashions for men.’ is enclosed within single quotation marks. This is because the JavaScript itself is enclosed within double quotation marks. If the text also used double quotation marks, the browser would not know how to distinguish the quoted JavaScript from the quoted text.

Observe also that both the description and the phrase return true end in a semicolon. This is basic JavaScript syntax, so get used to it. There are more semicolons in JavaScript than in all Charles Dickens’s novels combined. Technically, the semicolon is not required when a JavaScript statement ends the line. So,

window.status = “some thing”

is perfectly valid JavaScript in the context of a function, a la:

<script type=”text/javascript”> function rollover() {

window.status = “some thing” // no semicolon

}

</script>

But if you are placing two or more statements on a single line, as you would inside an event handler attribute, you must separate the statements by semicolons.

Taking Your Talent to the Web

297

Finally, note that return true is used at the end to handle the event. It tells the browser to follow the HTML link. Return false would tell the browser not to follow the link, which can be useful when you don’t want to load a new page.

Status Quo

So far, so good—now let’s make our little example even more exciting. (Well, as exciting as this kind of stuff gets.) Let’s craft a message that shows up in the status bar when the visitor stops hovering over the link:

Explore FASHION MAVEN <a href=”/fashions/men/” onMouseOver =”window.status=’FASHION MAVEN fashions for men.’; return true;” onMouseOut=”windowstatus=’Welcome to FASHION MAVEN.’; return true;”>fashions for men</a>.

What have we done? (Besides further prostituting ourselves to FASHION

MAVEN, that is.)

We’ve used exactly the same syntax to replace the onMouseOver message with a default status bar message. When the user places the mouse pointer over the link, he’ll read “FASHION MAVEN fashions for men.” When he releases the mouse, our insistent client will replace that link-specific brand message with a general one: “Welcome to FASHION MAVEN.” This general message will remain in the visitor’s status bar until he moves the mouse over a new link. If we had not done this, “FASHION MAVEN fashions for men” would have been “stuck” in the status bar window even after the visitor removed his mouse from that link.

None of what we’ve just shown you requires any custom scripting or preparation in the <HEAD> of the HTML document. The onMouseOver and onMouseOut event handlers are as old as the hills, and any JavaScriptcapable browser will handle this code natively. (As we’ll see later, other JavaScript techniques require a script before the function itself.)

Well, this is fine for a single link, but coding identical onMouseOut messages for a dozen links seems like a lot of work, doesn’t it? There ought to be a shortcut! And fortunately, there is. (Programmers are always creating shortcuts.)

298 HOW: The Joy of JavaScript: The Dreaded Text Rollover

In the <BODY> tag of our HTML document, we can add this line of code:

<body onLoad=”window.defaultStatus=’Welcome to FASHION MAVEN.’”>

For the sake of simplicity, we’ve left out the rest of the markup you might normally include in the <BODY> tag, such as the default background color, text color, and so on. Of course, if you’re following W3C recommendations and using CSS to handle your site’s stylistic elements, then your <BODY> tag can be as simple as <BODY> with no extra junk inside it.

As you have probably deduced, onLoad is another event handler. In this case, the event is the loading of the web page itself. When the page loads (the event), a function must be performed. In this case, you’ve instructed the browser that the required function is a change in the status bar message. Thanks to your cleverness, even before the visitor hovers over a link, the status bar at the bottom of the browser will proudly proclaim, “Welcome to FASHION MAVEN.” Can you feel your client’s love? We can. You have now carried your client’s brand down to the level of the status bar. Had you not done this, the status bar would read “Internet Zone” or something equally meaningless (as far as your client is concerned).

But wait, there’s more! Because the onLoad event handler in our <BODY> tag is telling the browser to proclaim “Welcome to FASHION MAVEN.” by default, we can simplify our JavaScript link as follows:

Explore FASHION MAVEN <a href=”/fashions/men/” onMouseOver =”window.status=’FASHION MAVEN fashions for men.’; return true;” onMouseOut=”window status=’’;return true;”>fashions for men</a>.

What changed? Look closely. We’ve removed the redundant text “Welcome to FASHION MAVEN” and replaced it with Folger’s Crystals. Just kidding. Actually, we’ve replaced it with an empty pair of single quotations, which tell the browser to revert to the default text specified by the onLoad event handler (“Welcome to FASHION MAVEN”), We no longer have to type “Welcome to FASHION MAVEN.” in the JavaScript text link itself.

That may not seem like much of an achievement. That’s because it’s not much of an achievement. But if there are a dozen links on this page, all requiring JavaScript text messages, we’ve saved ourselves the trouble of typing the same onMouseOut text 12 times. We’ve also saved the viewer the trouble of downloading those few kilobytes of redundant text.