Taking Your Talent to the Web- P22 potx

Notice that the status bar message text ‘FASHION MAVEN fashions for men.’ is enclosed within single quotation marks.. If the text also used double quotation marks, the browser would not

Trang 1

What is going on here?

We’ve used the onMouseOverevent handler to tell the browser that some-thing 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.statusis 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, gen-erally 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 hierar-chy down to the details: windowis a top-level object; statusis 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 distin-guish the quoted JavaScript from the quoted text

Observe also that both the description and the phrase return trueend 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:

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

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

Trang 2

Finally, note that return trueis used at the end to handle the event It tells the browser to follow the HTML link Return falsewould 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=”window

➥status=’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 onMouseOvermessage 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 vis-itor removed his mouse from that link

None of what we’ve just shown you requires any custom scripting or prepa-ration in the <HEAD> of the HTML document The onMouseOver and

onMouseOutevent handlers are as old as the hills, and any JavaScript-capable 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 mes-sages 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.)

Trang 3

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

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, onLoadis 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 mes-sage Thanks to your cleverness, even before the visitor hovers over a link, the status bar at the bottom of the browser will proudly proclaim, “Wel-come 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 some-thing equally meaningless (as far as your client is concerned)

But wait, there’s more! Because the onLoadevent 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 onLoadevent handler (“Welcome to FASHION MAVEN”), We no longer have to type “Wel-come 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 onMouseOuttext 12 times We’ve also saved the viewer the trouble of downloading those few kilobytes of redundant text

Trang 4

Notice that it is possible to create dynamic web effects in web pages that live on your desktop—without requiring a web server Hooray for JavaScript!

A Cautionary Note

Like everything you can do on the Web, modifying the default status bar message involves trade-offs and thus requires thought Browsers use

defaultStatus to communicate with users, letting them know if they’ve connected or not, informing them when an object is being downloaded, and letting the geeks in the house keep track of the actual URLs to which your links point Modifying defaultStatuscan enhance site branding and please your client, but it might upset some users, so don’t use JavaScript

in this way unless the benefits outweigh the drawbacks

Kids, Try This at Home

Before we go any further, try reproducing the JavaScript effects we just described in a simple HTML page you’ve written Needless to say, you will not win any innovation awards, but it might help you conquer any linger-ing fear of programmlinger-ing If you can do this simple thlinger-ing, you can do other, somewhat more complex things

When it works on a page you’ve created, you’ll begin to feel like a web

designer If it doesn’t work, you’ll really begin to feel like a web designer

Then you’ll go back and fix your syntax Speaking of which…

The fine print Because single quotation marks are used to denote the beginning and end-ing of text messages, what do you do if your text includes an apostrophe?

After all, in HTML, an apostrophe is exactly the same as a single quotation mark

What you do is “escape” the single quotation mark by inserting a backslash character in front of it

Lip smackin’ good! Get <a href=”/recipes/stupidcomeon.html “ onMouseOver

➥=”window.status=’Our chef\’s favorites.’; return true;” onMouseOut=”window status=’’;

➥return true;”>the recipes</a>.

Trang 5

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 sell-ing 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

Trang 6

These people are out there, and some of them might be among your clients’

favorite customers Thus, your infinitesimal gain in branding could be off-set 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:

…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 bal-loon 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 titleand the equal sign To avoid over-whelming 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 charac-ters 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:

Instead, use single quotations:

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

Trang 7

They make a handy informational and branding tool, and they work in older browsers (like Netscape 4) that don’t support the <TITLE>attribute

T HE E VER -P OPULAR I MAGE R OLLOVER

Problem: The site is pretty but feels lifeless Visitors are encouraged to admire but not to click and explore The site needs a shot of GUI-like, visual interactivity

Solution:The JavaScript image rollover (see Figures 11.2 and 11.3)

302 HOW: The Joy of JavaScript: The Ever-Popular Image Rollover

Figure 11.2

Kaliber 10000, “The

Designer’s Lunchbox,” is a

jewel of graphic and

navi-gational design with

numerous JavaScript tricks

up its virtual sleeve Note

the “K10k back issues”

pull-down menu at the

upper right, the code for

which is described later in

this chapter One of K10k’s

simpler (but very

effec-tive) techniques is using

the ever-popular image

rollover to replace static

icons with animated ones.

For instance…

Figure 11.3

…dragging your mouse

cursor over the Rants and

Raves button replaces the

static dog with a GIF

ani-mation of a pooping dog.

Hey, we said they were

brilliant web designers;

we didn’t say they were

mature ( www.k10k.net )

Trang 8

Let’s assume that after reading Chapter 9, “Visual Tools,” you opened Pho-toshop and ImageReady, designed a web page comp, sliced it, and used ImageReady to generate the JavaScript rollover Now take those same sliced images, open your HTML text editor of choice (Allaire Homesite, Barebones BBEdit, or Optima-Systems PageSpinner), and, using the tech-niques you learned in the books or online tutorials mentioned earlier in this chapter, write yourself an image rollover by hand

You can do it! It’s okay to prop the books open in front of you or to refer back to Thau’s web pages You’ll create links much like the text links we

showed in the previous example You’ll also hand-code a preload, usually

in the <HEAD>of your document A preload ensures that swapped images will be downloaded to the user’s cache before the page displays In that way, those preloaded images are ready to leap into action the moment the user drags her mouse over them

Why are rollover effects so popular? We think it is because users are accus-tomed to operating systems whose GUIs respond to their actions Rollovers emulate this behavior, and they indicate that an image is more than an image—it is a dynamic trigger to an action the user can perform Users dig that stuff

A Rollover Script from Project Cool

On the assumption that you haven’t bought those other books yet, haven’t read any of the online tutorials, and still feel uncomfortable with JavaScript, we’ll go ahead and show you another simple way to create JavaScript image rollovers

The following was adapted from a basic script at Project Cool And that’s okay Project Cool wrote their script back in the late 1990s so web design-ers would use it and learn from it The future of Project Cool is doubtful because the site’s creators left in late 1999, but this script and others like

it were still available online as of this writing (www.projectcool.com)

<! Adapted from Projectcool.com

if (document.images){

Trang 9

mainover = new Image; mainout = new Image;

mainover.src = “/images/menubar_over_1.gif”;

mainout.src = “/images/menubar_out_1.gif”;

storiesover = new Image; storiesout = new Image;

storiesover.src = “/images/menubar_over_2.gif”;

storiesout.src = “/images/menubar_out_2.gif”;

} functiover swapem(iname, gname) { if(document.images){

iname.src = gname.src;

} } // >

</script>

This script goes inside the <head></head>of an HTML document It might look complex if you’re unfamiliar with JavaScript, but it is really elegantly simple

The script begins by announcing the fact that it is a script and that its type

is text/javascript Older browsers expected to see a <LANGUAGE> attrib-ute with the name and, optionally, a version of the scripting language being used (“Javascript1.2,” for instance), but this attribute has been deprecated

in favor of a more generic <MIME>type descriptor Don’t worry if you don’t understand what we just said; simply relax and type:

Similarly, the end of the script is announced by a </script>tag As with HTML and CSS, <comment> tags tell search engine spiders (and non-JavaScript-capable browsers) to ignore everything written between

<! and > You want search engines to help web users find your content, not your JavaScript

Next, the Project Cool script sets a condition for running Early versions of JavaScript did not support image rollovers The script wants to make sure

it is working with a browser that understands rollovers, so it tests the

browser’s receptivity to the images array object of the document model:

if (document.images)

304 HOW: The Joy of JavaScript: The Ever-Popular Image Rollover

Trang 10

The script could have accomplished the same thing by detecting for

browsers and platforms (a technique known as browser sniffing) For

instance, it could have checked for the presence of Netscape 2 and Inter-net Explorer 3, two browsers that did not support the images array of the document model (and hence would not be able to process this script) But the code to check for these browsers is somewhat long compared to a sim-ple line such as

if (document.images)

Besides, some versions of IE3 did understand image rollovers Rather than

get tangled in browser versions, it is easier, more elegant, and more reli-able to test for an understanding of the document images object If the browser does not understand (document.images), the script will be skipped

If the required conditions are met, the script runs

The script next declares two image conditions (Overor Out) and preloads the required images (mb3_on-01-01.gif,mb3_off-01-01.gif, mb3_on-02-01.gif, and mb3_off-02-01.gif):