Taking Your Talent to the Web: A Guide for the Transitioning Designer- P16 pps

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 JavaScrip

Trang 1

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 2

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

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 3

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 4

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)

Trang 5

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):

if (document.images){

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”;

Overcorresponds to the onMouseOverstate, and offcorresponds to the default and onMouseOutstate The two images correspond to two named JavaScript objects (mainand stories)

Finally, the script declares a swapemfunction, which works by swapping one image state for another:

function swapem(iname, gname) { if(document.images){

iname.src = gname.src;

Trang 6

As we said, all of this takes place in the <HEAD>of the HTML document, though it could just as easily live in an external JavaScript document Like

an external style sheet as described in Chapter 10, “Style Sheets for Design-ers” external JavaScript documents can live anywhere on the web server and are referenced via links in the <HEAD>of each HTML page:

For more on external JavaScripts, see “Going Global with JavaScript,” later

in this chapter

All that remains is to call up these functions in the <BODY>of the HTML document itself

And here is code that does just that:

<a href =”/main.html” onMouseOver=”swapem(main, mainover); return true;”

➥onMouseOut=”swapem(main, mainout);return true;”><img name=”main”

➥src”/images/menubar_out_1.gif “ width=”200” height=”25” border=”0” alt=”Visit the

➥main page.” title=”Visit the main page.”></a>

This code should look somewhat familiar to you because it is fairly similar

to the dreaded text rollover

Once again, here is a standard HTML link followed by two event handlers: one for onMouseOver, the other for onMouseOut But now, instead of invoking a status bar message, our MouseOverand MouseOutstates call upon the swapem function declared earlier in the document The

onMouseOverevent handler declares two variables for the swapem func-tion: a named object (in this case, main) and an appropriate image state (mainover)—over, because this is the “MouseOver” state for the image object The onMouseOutevent handler also declares two variables for the

swapemfunction: a named object (main) and an appropriate image state (mainout)—out, because this is the “MouseOut” state for the image object Semicolons follow the naming of the variables and the required return true

declaration

The image <IMG>tag that follows gives the source image a name (main), allowing the swapemfunction to recognize the image as the object that is supposed to be swapped The remaining <SRC>, <WIDTH>, <HEIGHT>, and

<BORDER>attributes should be familiar to you from the HTML chapter The

<ALT> and <TITLE> attributes are included so that the menu item will

Trang 7

remain accessible to those who surf with images turned off or who are using nongraphical browsers such as Lynx The link to /main.htmlwill work even if JavaScript has been turned off in the user preferences (or the browser does not support JavaScript)

The code and the effect on the web page are much simpler than the descriptive text you’ve just waded through

You might ask, can JavaScript text rollovers be added to an image roll-over like the one just described? The answer is yes, and it can be done very easily:

<a href =”/main.html” onMouseOver=”swapem(main, mainover); window.status=’Visit the

➥main page.’; return true;” onMouseOut=”swapem(main, mainout); window.status=’’;

➥return true;”><img name=”main” src=”/images/menubar_out_1.gif” width=”200”

➥height=”25” border=”0” alt=”Visit the main page.” title=”Visit the main page.”></a>

Problem:The site offers streaming video files You, the client, or the infor-mation architect want these files to play back inside the browser via the QuickTime plug-in (see Chapter 12) It is easy to use the HTML <EMBED>

or <OBJECT>tags to embed a QuickTime movie in a thoughtfully designed HTML page But if you do this on the current page, the movie will begin streaming even if visitors do not have the bandwidth or patience to see it

Solution:The JavaScript pop-up window

Opening new windows via JavaScript is a simple task, though it’s some-what controversial Some web users feel that everything should happen in their existing browser window These folks hate pop-up windows, remote controls, and everything else that can happen outside the safe, familiar world of their existing browser window

Are these users right? They are right for themselves

What does this mean? It means that pop-up windows, remotes, and other such stunts should never be created lightly or purposelessly (Why offend visitors if you can avoid it?)

Trang 8

Sometimes, however, you need pop-up windows Sometimes, nothing else will do—as in the present example, when you wish to embed a streaming video file in a web page but don’t want to force that streaming movie on users who don’t care to (or can’t) view it Pop-up windows can also be used

to provide additional information as needed (see Figure 11.4) In case of emergency, break glass and use JavaScript to easily create new windows

308 HOW: The Joy of JavaScript: Windows on the World

Get Your <HEAD> Together Before you can create a new window, you must define it in the HTML

<HEAD>of your HTML document

Here is a typical way to do just that:

<html>

<head>

<title>Welcome to Porkchops.com!</title>

Figure 11.4

JavaScript pop-up

win-dows annoy some web

users but can be

extreme-ly functional At TV

Guide’s site, the main

page offers a compressed

listing of all available

cable channels Clicking

any program triggers a

pop-up window that

offers detailed

informa-tion about the selected

show Here, for instance,

we can read about Dick

Shawn groping for laughs

as a drunken genie in The

Wizard of Baghdad The

point is that JavaScript

allows the user to select

exactly the level of

detail needed

( www.tvguide.com ).

Trang 9

<! function awindow(url) { return window.open(url, “thewindow”, “toolbar=no,width=350,height=400,status=

➥no,scrollbars=yes,resize=no,menubar=no”);

} // >

</script>

</head>

What are we doing? We have defined a function, given it a name ( aWin-dow), and defined its properties: It will not have a toolbar (toolbar=no), it will be 350 pixels wide (width=350), it will stay the exact size we’ve spec-ified (resize=no), and so on

We have also, without even realizing it, declared a JavaScript variable—that

is, an element that can be replaced, as in the swapemexample Our vari-able is the URL of any HTML document we would like to use in the pop-up window

In the HTML page, we would trigger the function like so:

When the event is triggered by the user’s action (clicking the link), the named window.openfunction will be performed, and the appropriate HTML page will appear in a 350 x 400 pop-up window with no status bar or menu bar The return falsewill prevent the browser from following the URL spec-ified in the <HREF>, for backward compatibility

As a courtesy, it’s nice to include a <CLOSE WINDOW>function in the

pop-up window itself, for the beginners in our viewing public Porkpops.html should include a link like this:

<a href=”#” onclick=”window.close(); return false;”>Close me!</a>

Onclick is another of those essential built-in JavaScript event handlers you’ll come to know and love, and window.closeis a built-in JavaScript function that, as you might have guessed, closes windows In other words,

we are telling the browser to close the window—pretty basic stuff

Trang 10

Can we use graphics instead of HTML text to perform these functions? Oh, yeah! In the original HTML document, we can use a fancy-pants GIF image we’ll call openwindow.gif:

<a href=”sucky_old_browser.html” onClick=”aWindow(‘porkpops.html’); return

➥false;”><img alt=”Open new window.” src=”openwindow.gif” height=”100”

➥width=”100”></a>

And in the pop-up window we can use the dapper and elegant closeme.gif:

<a href=”#” onclick=”window.close(); return false”>)”><img alt=”Close this window.”

➥src=”closeme.gif” height=”25” width=”50”>

And that’s all there is to it

Problem:The client insists on a menu with dozens of choices You know such a menu will be ugly and confusing and will cause visitors to scroll indefinitely (or more likely, leave) Your client “knows better.” What’s a mother to do?

Solution:The JavaScript pull-down menu

Slip this in your <HEAD>and smoke it:

<! function load_page(which_form) {

self.location.href=which_form.modules.options[which_form.modules.selectedIndex].value;} // >

</script>

This sets up a load_pagefunction with a replaceable variable (which_form) and uses the locationobject to swap links in and out

Now, in the <BODY>of your HTML document, create a standard HTML pull-down form element and use the onChangeevent handler to trigger new pages in response to user actions:

<option value=””>Pick a Project!

<option value=”a.html”>A List

310 HOW: The Joy of JavaScript: Avoiding the Heartbreak of Linkitis

Định dạng
Số trang	20
Dung lượng	418,64 KB