JavaScript for the World Wide Web, Third Edition (Visual QuickStart Guide) - Softcover

Tom Negrino

Softcover

ISBN 10: 0201354632 ISBN 13: 9780201354638

Publisher: Peachpit Press, 1999

Synopsis

JavaScript for the World Wide Web: Visual QuickStart Guide, Third Edition is the book for people who already know how to build Web pages with HTML, and are ready to take the next step in making their sites more interesting and exciting. With an easy, step-by-step approach and loads of useful illustrations, readers learn to use JavaScript to liven up their pages with dynamic images and smart forms. They'll learn to control browsers; detect which browser or plug-ins the user has and automatically take action; use JavaScript to create and manipulate windows, and much more.

About this title

About the Author

Tom Negrino is a best-selling book author and contributing editor to Macworld magazine. He is the co-author of two previous editions of this book.
Dori Smith writes the JavaScript columns for Macworld and DevX, and is a contributing editor for MacTech. She is the co-author of the previous editions of this book, and author of Java for the World Wide Web: Visual QuickStart Guide.

From the Back Cover

Does the following sound familiar? You know how to build a good-looking Web page, but you'd like to add some excitement and interactivity to your site. Then the next step is JavaScript, a programming language designed to make HTML more powerful and dynamic. You don't need to be a seasoned programmer to master JavaScript--just a copy of JavaScript for the World Wide Web: Visual QuickStart Guide. This third edition of the best-selling guide includes expanded coverage of such essential topics as how to liven up your pages with dynamic images, add smart forms, and detect which browsers and plug-ins your visitors are using so you can customize the content they see. What hasn't changed is the book's clear, step-by-step approach and generous sample code and screenshots. With JavaScript: VQS, you get both an excellent introduction to the language and a handy reference tool.

Reviews

These are updates of titles that continue to sell; all are very visual and practical.
Copyright 1999 Reed Business Information, Inc.

Excerpt. © Reprinted by permission. All rights reserved.

One of the best uses of JavaScript is to add excitement to Web pages by animating graphics, and that's what this chapter is all about. Making images on Web pages change when the user moves the mouse over the image, thereby making the page react to

the user, is one of the most common-and effective-tricks you can learn in JavaScript. This rollover, as it is called, is easy to implement, yet has many applications, as you'll see.

You can also use JavaScript to create images that change automatically, and even make animated advertising banners that take the place of animated GIF files.

Creating More Effective Rollovers

To make the illusion of animation work, you need to make sure that the replacement image appears immediately, with no delay while it is fetched from the server. To do that, you use JavaScript to preload all the images into the browser's cache (so that they are already on the user's hard disk when they are needed) and place the images into script variables. Then when the user moves the mouse over an image, the script swaps out one variable containing an image for a second variable containing the replacement image. Script 3.2 shows how it is done. The visible result is the same as in Figures 3.1 and 3.2, but the apparent animation is smoother.
To create a better rollover:
1. if (document.images) { arrowRed = new Image arrowBlue = new Image arrowRed.src = 'images/redArrow.gif arrowBlue.src = 'images/blueArrow.gif }
This code checks to see if the browser understands image objects (see sidebar). If the browser does, the code assigns arrowRed and arrowBlue to two separate image objects. Then, using the .src property, it fills the two objects with the GIFs of the red and blue arrows.
2. else { arrowRed = arrowBlue = document.arrow = }This is the code that tells old browsers (ones that failed the test in step 1) what to do. In order to keep from getting error messages in old browsers, we have tocreate some dummy variables-that is, variables that won't do anything but be created and set to empty. Think of them as placeholders. Create two variables named arrowRed and arrowBlue, andset them to empty. Then create and set document.arrow to empty, too.
3. The rest of the rollover gets handled in the link tag. When the user puts the mouse over the blue arrow graphic (onMouseover), the script swaps the blue arrow for the graphic with the red arrow (document.arrow.src=arrowRed.src). When the mouse cursor leaves the area of the graphic, the script reverts the graphic back to the blue arrow.

Tips
When you prepare your graphics for rollovers, make sure that all your GIF images are not transparent. Transparent images will show the image they are replacing underneath.
Both the original and the replacement images need to have identical dimensions. Otherwise, the browser will resize the images for you and probably won't like the distorted result.

Triggering Rollovers
from a Link
In prior examples, the user triggered the rollover by moving the mouse over an image. But you can also make a rollover occur when the user points at a text link, as in Figures 3.3 and 3.4. All you need to do is to puta text link within the
Note that the text link that says Next page is within the link tag, which makes it the thing that onMouseover and onMouseout use as a trigger. We've moved the IMG tag out of the link tag; it nowfollows the link tag.

Tip
This trigger technique is useful when you want to provide the user with a preview of what they will see if they click the link at which they are pointing. For example, say you have a travel site describing trips to Scotland, Tahiti, and Cleveland. On the left of the page could be a column of text links for each destination, while on the right could be a preview area where an image appears. As the user points at the name of a destination, a picture of that place appears in the preview area. Clicking on the link takes the user to a page detailing their fabulous vacation spot.

Edition details

• Publisher: Peachpit Press
• Publication date: 1999
• Language: English
• ISBN 10: 0201354632
• ISBN 13: 9780201354638
• Binding: Paperback
• Edition number: 3
• Number of pages: 292