JavaScript Tip:
Avoid An IE Rollover Bug

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

A JavaScript bug in recent versions (5 and 6) of Internet Explorer may cause problems with JavaScript rollovers. The browser ignores the images saved in the local cache file and instead requests the image from the server each time a visitor moves the mouse over the image. We'll show you two easy ways to avoid this download problem.

Repeated Downloads Slow Pages

Image size is often the single most important determination of overall page download time, so webmasters spend a lot of time manipulating images. Common techniques include:

Note that two of these techniques specifically rely on the browser's cache file to save and display images much more quickly than they can be downloaded from the server each time they're needed.

That's why this Explorer bug is such a problem.

Explorer Ignores The Cache

When you use an absolute image path inside your JavaScript rollover code, Explorer ignores the cached copy and requests the file from the browser each time it's needed.

This problem only happens when you use an absolute image path to refer to the rollover image. An absolute URL or path is the complete address for a Web file. A relative URL or path describes a file in relation to another file on the same server.

Visitors with fast connections won't notice any delay, but your visitors with slower, dial-up connections may not see a seamless transition. They'll assume that either your page is poorly designed or it contains broken image links!

Two Simple Solutions

The first solution is simple: use relative links for your rollover images. Explorer checks the cache and retrieves them without a problem.

Instead of this absolute URL:
http://www.NetMechanic.com/news/images/NetMechLogo.jpg

Use this one instead:
../images/NetMechLogo.jpg.

Or, use the CSS option. It works if you're using images for rollovers - like navigation buttons. You can avoid using JavaScript by using the CSS hover attribute.

<style type="text/css">
a:hover
{
background-image(insert your image name and path);
}
</style>

You may also consider whether you need images for rollovers at all. It's easy to create custom navigation menus with CSS and get the benefits of image rollovers without the download penalty.

If you use CSS, always thoroughly test your page because browser compatibility is a particular problem with style sheets. For instance, when you use a relative URL inside a style specification in our example, Netscape 4.x browsers look at it in relation to the current HTML file while other browsers look at the relative URL in relation to the external CSS file (if you're using an external file).

That means any visitors using Netscape 4.7 may see a broken image instead of your rollover or background image! Browser Photo helps you quickly find and correct browser compatibility problems like this. Just a quick glance of the NN 4.7 screen shot would immediately alert you to a missing background image.

Decreased Downloads Help Everyone

Either the absolute URL or CSS solution takes care of the Explorer bug and helps you and your visitors. You save bandwidth because the browser isn't continually requesting the same image directly from the server. This may not be a problem with tiny images, but it can add up quickly for sites with large images.

Imagine having to pay your Web host for extra bandwidth because of a browser bug!

Your visitors benefit too: a seamless transition between images gives them a better browsing experience. And decreased page download time is always welcome! Visitors are apt to leave slow-loading pages without waiting to view the content, so check your page download time using HTML Toolbox.

It alerts you to problem pages in your site and help you identify other problems (like HTML coding errors) that can cause even more problems for your visitors!