Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 

Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format



Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Design Tip:
Animation With JavaScript

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
August 2000
(Part 2)
Vol. 3, No. 10
 • HTML Tip
 • Design Tip
 • Promotion Tip
  

Animation on Web sites is controversial because the quality is often uneven. Well-done animation adds excitement and interest to a Web page, but bad animation distracts viewers and increases download times. You want to use animation to provide a sense of movement to the page - without inducing motion sickness in your visitors.

You can use some simple JavaScript techniques to include user-controlled animation that adds action without annoying visitors. The examples in this article will show you how to include an animated GIF in your JavaScript code and also how to create a simple animation effect using a JavaScript rollover.

Carefully Select The Best Format

When you decide to include animation on your Web site, you are constrained by two main factors: your ability and your audience's browser limitations. For instance, Java applets require that you have at least some basic Java programming ability. Shockwave and Flash effects must be created using Macromedia's tool sets and both require that your visitors have the plug-ins installed to view them.

JavaScript is easier to learn and more widely available to users. There are many ways to create animation effects with JavaScript: rollovers and cycling banners are the easiest, but you can also use more complex coding to create animated DHTML effects. Be careful with those because they'll only work in Explorer and Netscape versions 4.0 and up.

Animated GIF's are the easiest to create and implement. GIF is the most widely supported format since everyone using a graphical browser has the capability to view GIF images. In an animated GIF file, several GIF89 images are stored in a single file and then played in sequence. The image file is downloaded once and replayed from the computer's disk cache. Many software packages are available that help you create animated GIFs (from images in the GIF89 format) and control their display.

Animated GIFs are so easy to create that novices often get carried away and create huge files that take forever to download. All the image optimization rules for regular GIFs still apply to animated ones. Speed up your file by optimizing each image with NetMechanic's free GIFBot tool before you combine them into a single file.

User Control Over Animated GIFs

One of the most common complaints about animation is that the constant movement annoys visitors and detracts from the page's content. This is a valid argument; who hasn't been driven from at least one Web site by an annoying animated graphic that repeats endlessly?

It is possible to include an animated GIF on your page and give the user some control over its display. If you can use the animation in a link, control it with a JavaScript rollover. The image only displays when the visitor moves the mouse over the graphic. Try it for yourself!

Red Chile graphic

Preload your images in the HEAD tag:


Next, include the rollover inside the <A> tag in the BODY section:


When your visitor moves the mouse over the chile pepper image, it begins to dance. The animation continues as long as the mouse stays over it. All a visitor has to do to stop the animation is move the mouse.

Animation Using Two Images

If you'd rather avoid the download times of animated GIFs (or don't want to bother creating one), you can include a basic animation using the same rollover technique. In this case though, the replacement image simulates movement, but isn't an animated GIF.

Next Page!

Preload your images in the HEAD tag:


Rollover code to include in the <A> tag in the BODY section:


JavaScript Notes:
  • JavaScript rollovers only work inside the anchor <A> tag. Two common mistakes are to include them in the IMG or forget to include the NAME attribute in the IMG tag.
  • Always start with images that are the same size or the browser will scale them to fit.
  • Animation effects created with JavaScript won't work if users have JavaScript turned off in their browsers. In that case, your visitors will only see the original image that you load in the <IMG SRC> tag.
  • Netscape is still working out the bugs in the 6.0 Preview Releases, so be sure to test all your JavaScript applications when the final version is released.

Animation is like hot sauce - a little goes a long way. Use it sparingly to spice up your page and enhance your content. Know your audience and choose a format they can easily access. If the information is important enough to include on your site, it should be readily available to the majority of your visitors.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.