Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Advanced
Jun 15, 2000

Image-Based Menu Problem with Internet Explorer 5.0

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:

 
<div id="imgDivOn" class="imgdivstyle">
<a href="target.htm" onmouseover="imgRoll(true);"onmouseout="imgRoll(false);">
<img src="img_on.gif" border="0"></img></a>
</div>
<div id="imgDivoff" class="imgdivstyle"> 
<a href="#" onmouseover="imgRoll(true);" onmouseout="imgRoll(false);">
<img src="img_off.gif" border="0"></img></a>
</div>

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";
}
}
 

Ajith Prasad
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap