Background rollover images not cached, why?

Strange, annoying CSS / JS problem occuring in IE5 & 6

[paul_k]

When I use an absolute image path for the backgroundImage url, it does get locally cached, but nevertheless is called every time a menu item is rolled over. You can see in the IE status bar it flickers "Downloading picture..." when rolling over the menu. Super fast net connections may be too quick to notice that the image is actually getting downloaded on each rollover. If I use a relative path to the image, there is no problem and it works great, as the rest of the site shows. But this one page is a JSP servlet that requires an absolute path.

function LHNRollOver(item) {
item.style.backgroundImage="url(http://www.foxsports.com.au/images/leftnav_over_bg.gif)";
item.style.color='#4B4B4B';
}

The page in question is here:
<sorry, no URLs>
Its a new site, there may be other things whack. I need to solve this menu thing though.

I have tried using base href in the page, standard JS preloading the 2 menu images, removing 'www', all no luck.
I hope someone can offer a suggestion or point out something obvious - which would make me happy :)
I will try to solve someone else's problem in return - although its hard to find one unsolved!

[edited by: tedster at 11:37 am (utc) on Nov. 6, 2002]

[tedster]

Welcome to WebmasterWorld< paul.

Unforunately, this is a browser problem with recent versions of IE and I don't know of a workaround, sorry to say. I stopped designing image rollovers because of it and use CSS hover behaviors instead. That helps with bandwidth, but it does limit the artisitc effects that I can achieve.

[paul_k]

Thanks. I will just have to use a relative path for the images in the page I was troubled by, and then it should be ok. Just the backend developers I work with didn't want to do this for some reason.

I see what you're saying about hover effects saving bandwidth over image rollovers, but that's why I like CSS swapping out the background image. Only 2 images needed for an entire nav, and if each image is only a few hundred bytes then bandwidth won't be an issue, and the designer is happy. :)

[tedster]

...that's why I like CSS swapping out the background image

Please, let us know if IE does use the cached image when you reference the relative path instead of the absolute. With foreground rollovers, that doesn't seem to change the stupid behavior.

If background-image swaps do work with relative URLs, I will happily add this to my bag of tricks.

You're right on the money -- a few hundred bytes is a very small bandwidth price. However, a server hit on every mouseover is no good at all - and a lot of the web currently suffers from sluggish rollover response because of this IE strangeness. Standard DW rollovers are affected, and they're all over.

[paul_k]

Yep, I tested carefully, and can confirm IE does indeed use the cached image when using relative paths for background image swaps. Using absolute paths though, results in a server hit on every mouseover, a bug in IE5 and IE6.

Mozilla, Netscape 7 and even Opera will correctly use the cached image regardless of whether the mouseover background image path is relative or absolute. It's a really clumsy bug by Microsoft I must say.

At least we do have a workaround, and the technique allows us to have light-weight semi-graphical rollover menus that are bandwidth friendly. They may even come back in fashion!

[tedster]

Thanks, Paul. It's good to have your report and testing. My next design just might use those background image changes.