With the introduction of Internet Explorer 5.0, many people had to remove the image-based menus from their Web sites. The reason for this is bad performance. When the file-caching mode is set to “Every visit to the page,” IE tries to fetch those menu images directly from the Web server with the mouse events. Typically, these menus are implemented with two sets of images to show on mouseover/mouseout events. You can do this by changing the src property of the image object with the mouse events. With earlier versions of IE it was possible to pre-load the images using an array of image objects, but that doesn’t seem to work with version 5.0.

If you still want to keep those image-based menus, here’s a work around that works well with all versions of Internet Explorer and Netscape Navigator browsers. The technique explained here uses two IMG tags and and two DIV tags for each menu item. Now, depending on the mouse events, we need to hide/show the desired layer. Here’s an example:

The style ‘imgdivstyle’ has to be defined with position attributes of the DIV. The following code does the job of displaying the images without flicker and without having to go the Web server to fetch the images every time.

 var ie = (navigator.appName == "Microsoft Internet Explorer");function imgRoll(flag) {if (ie) {document.all.imgDivOff.style.visibility = flag ? "hidden" : "visible";document.all.imgDivOn.style.visibility = flag ? "visible" : "hidden";} else {document.imgDivOff.visibility = flag ? "hidden" : "visible";document.imgDivOn.visibility = flag ? "visible" : "hidden";}}