JavaScript Revisited
by Heather Champ
Last October I mentioned the URL of the World Wide Web Artists Consortium List (more commonly knows as the WWAC list) to American Friends of the Israel Philharmonic Orchestra. Seth D. Palmer author and Webmaster of the site had created a wonderful "animated" navigation bar, the first of its kind that I had seen. As the user "mouses" over the various navigation choices, the buttons change and an additional image is displayed.Easy Instant SizzleShortly afterward Glenn Davis incorporated this feature into Project Cool and recently launched a combination one-year anniversary gift and happy new year downloadable tutorial (A Programming Gift From Project Cool) for developers to create their own JavaScript animated navigation bars. The tutorial uses the script that Glenn created for his site and enables individuals to change it for use on their own sites in part to aid people who were using the script without truly understanding what changes need to be made. If you are creating an animation that is identical to his, it's easy and a great way to incorporate a bit of flash into your design.
Razorfish's redesign of America Online's site incorporates a variation with highlighted navigation elements. It's very clean and aids in highlighting the information in a very content-rich document. Because of the real estate constrictions, the subtle glow catches the user's eye.
It's interesting to see how the use of an animated mouse over scripts has morphed from navigation into something perhaps more artistic. Brad Johnson Presents has by far the largest image-change JavaScript that I've seen. But the effect is interesting. Given that all the images are loaded before the script will "animate," size should always be a consideration.
My current favorite evolution can be found at the land of La-Z-Boy. While perusing the various differences of the "Dynamo," "Dreamtime," "Cashmere," and "Cardinal" Reclina-Rockers, a user also has the opportunity to view the selected model in a variety of fabulous finishes. Mousing over the fabric swatches changes the image of the Reclina-Rocker so that the overall effect can be viewed--something that is impossible even in your favorite furniture department.
By viewing a different implementation of such a script, it's possible to begin to see a wide variety of possibilities--JavaScript, it isn't just for navigation.
A quick way to add sizzle without fighting a complex script is to incorporate a mouse-over attribute within an <A HREF...> tag. When a user passes over a linked URL, the information in the status bar at the bottom of the browser will display your text as opposed to the URL of the document.
A tag that looks like this:
<A HREF="http://your_document_here" onMouseOver="window.status='blah blah blah'; return true"> ... </A>
Will generate the text "blah, blah, blah" instead of the usual "http://your_document_here". This can be very helpful to further explain the nature of the content in the document, given that navigation bar elements strive to be as brief as possible.
