Animation Sans Annoyance
Animation on Web sites is controversial because it affects download time and distracts readers from other page content.
Though many Web designers find it irresistible, a lot of visitors hate it.
One easy solution is to use a JavaScript rollover. It allows you to include animation on your site while giving your audience control over its display.
With a rollover, visitors see a static image until they move their pointers inside the image border.
When the pointer rolls over the image, this onMouseOver event, as it is known in JavaScript, triggers an animated GIF. This action adds a surprise element of interactivity to your site.
Here's an example: Move your pointer over this image to view the animated GIF. If it becomes annoying, move the pointer away.
Adding a rollover to your page is a two-step process.
Preload your images in the <HEAD> tag.
The rollover requires two images: a static image and an animated GIF. Preloading the images creates a smoother transition between the two when the rollover is initiated.
Because the browser requests preloaded images as the page loads, images are ready to display when needed.
If images aren't preloaded, the browser doesn't request the file until the rollover is triggered. Without preloading, large images or slow Internet connections can cause considerable delays.
<SCRIPT LANGUAGE = JAVASCRIPT>
<!— Hide script from old browsers
if(document.images)
{
eyeOpen = new Image
eyeBlink = new Image
eyeOpen.src = "eyeOpen.gif"
eyeBlink.src = "eyeBlink.gif"
}
// Stop hiding script from older browsers —>
</SCRIPT>
Include the rollover inside the <A> tag in the BODY section:
<A HREF="http://www.netmechanic.com/news/"
onMouseover ="document.eye.src=eyeBlink.src"
onMouseout ="document.eye.src=eyeOpen.src>
<IMG BORDER="0" SRC="eyeOpen.gif" ALT="Blinking eye graphic" NAME = "eye" WIDTH="79" HEIGHT="52"></a>
When a visitor moves the pointer over the eye image, it begins to blink. Animation continues as long as the pointer stays over it. All a visitor has to do to stop the animation is move the pointer.
Things to remember:
- JavaScript rollovers only work inside the
<A>tag. Two common mistakes are to include them in the<IMG>tag 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 match, with sometimes bizarre results.
- Animation effects created with JavaScript won't work if users have JavaScript turned off in their browsers. In that case, visitors will only see the original image you loaded with the
<IMG>tag.
A little animation goes a long way. Use it to provide a sense of movement on the page without inducing motion sickness. This simple JavaScript technique adds action and interactivity without annoying your visitors.
About the Author:
Todd Gandy is director of business development for NetMechanic Inc., an independent provider of online Web site maintenance, promotion and monitoring services.
Click here for more info from this author...
