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

Notice that we don’t refer to our chef’s favorites; we refer to our chef\’s favorites. The backslash character tells the browser to treat the quotation mark as a quotation mark, not a string terminator (meaning, not the end of a JavaScript statement). Forgotten backslashes have caused many a web designer her share of sleepless nights.

Return of the son of fine print

Yep, one more tip. Forget the semicolon, and you will create JavaScript errors in many browsers, which unfortunately will not show up in many others. That’s unfortunate because if you can’t see the error, you might not realize it’s in there—so you may not know to fix it.

For some reason, Macs seem especially forgiving of the missing semicolon error. Many a Mac-based web designer has uploaded a web page (or an entire site) and gone off to smoke reefer, little realizing that he has left a trail of JavaScript syntax errors behind him. The moral, of course, is to check your JavaScript syntax carefully, test on multiple platforms, and avoid smoking reefer—especially that overpriced brown stuff they’re selling uptown.

The Not-So-Fine Print

It’s worth pointing out again that some web users, including hardcore geeks, detest this flippant toying with the sanctity of the status bar. These users want to know which URL your link will take them to. They deeply resent your hiding this information from them with stupid text about FASHION MAVEN. Some might even avoid clicking the link out of paranoid fear. (“Dude, if I can’t see the link, I don’t know where you’re taking me.”) Thus they will never learn about FASHION MAVEN’s extensive selection of plaids and corduroys for tall men, short men, fat men, and cadets, all at prices 10% below what department stores usually charge.

You think we are making this up, but you haven’t read our email and haven’t spent years watching flame wars erupt on web design mailing lists. You think people will click links without worrying about or even noticing these changes in the expected status bar message. Many people, of course, won’t notice; many others will notice and not care; some will notice and be pleased. But others will be displeased, and a few may even write letters of complaint.

Taking Your Talent to the Web

301

These people are out there, and some of them might be among your clients’ favorite customers. Thus, your infinitesimal gain in branding could be offset by a commensurate loss of audience. Even this small a decision is worth considering carefully.

It’s also worth mentioning that, with the rise of HTML’s <TITLE> attribute:

<a href=”somelink.html” title=”Information about this link.”>

…there is now an easier way to enhance the information conveyed by a link.

In IE4 (and higher), Netscape 6 (and higher), Opera 5, iCab, and Mozilla, the <TITLE> attribute will cause a Windows-like Tool Tip or Mac OS Help balloon to pop up when the user hovers over the link. (In Opera, the message appears in the browser’s status bar, just like a JavaScript mouse-over text.) This Tool Tip or Help balloon will contain the text you’ve written inside the quotation marks following the word title and the equal sign. To avoid overwhelming users with flying tool tips, there is usually a slight delay before the Tool Tip appears. There is also no need to worry about escaped characters when writing <TITLE> attribute text:

<a href=”somelink.html” title=”It’s exciting not to worry about apostrophes, isn’t it? Gosh,it’s really swell.”

Of course, if your <TITLE> text includes a double quote, the browser could get confused:

<a href=”/” title=”We say “no!” to drugs.”>

Instead, use single quotations:

<a href=”/” title=”We say ‘no!’ to drugs.”>

Not only is this <TITLE> attribute method marginally easier to use than JavaScript, it is also, in some ways, more logical. When a user has her eye on a link (or a linked image), her eye does not wish to jump down to the browser status bar. Her eye wants to say where it is. In IE4+ and Netscape 6, the <TITLE> attribute accommodates this natural behavior of the human eye and mind because the Tool Tip or Help balloon pops up adjacent to the link itself.

Still, we do not wish to discourage you from using status bar messages.