IE Rollover problem

Image rollover issue comes mainly because of downloading image every time on hovering a link or tab. This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately). 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.

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.

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!

There are two ways we can fix this issue. The first solution is: use relative urls(links) for your rollover images. Explorer checks the cache and retrieves them without a problem.

Instead of this absolute URL:

http://faqspoint.blogspot.com/images/hello.jpg

Use this one instead:

/images/hello.jpg

Another way is use 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> 

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.