Hi. Microsoft Internet Explorer 6/Windows refuses to cache the
background images of dynamically-created DIVs with
mouseover/mouseout rollover effects that change the
background image.

My code works for IE 5/Win+Mac, as well as Netscape
7/6/4/Win+Mac, but with IE 6/Win, the background images are
loaded but not cached even after I've tried pre-loading them with
new Image(). Each and every mouseover/mouseout event
results in a connection to the webserver. The 2 images are
small (4 KB each), but because multiple DIVs use them as
background images, the load time is totally unacceptable. Here
is the relevant code snippet:

var w = 150
var h = 25
var offimg = new Image(w,h)
offimg.src = 'blueMarble.jpg'
var onimg = new Image(w,h)
onimg.src = 'redMarble.jpg'
...

// W3C DOM-1

var M =
document.appendChild(document.body.createElement('div'))
...
var I = M.appendChild(document.body.createElement('div'))
I.style.backgroundImage = 'url(' + offimg + ')'
I.onmouseover = onLinkW
I.onmouseout = offLinkW
...
function offLinkW()
...
this.style.backgroundImage = 'url(' + onimg.src + ')'
...
function offLinkW()
...
this.style.backgroundImage = 'url(' + offimg.src + ')'
...

I've already tried hardcoding the images in a non-displaying DIV:

<div style='display:none'>
<img src='blueMarble.jpg' width='150' height='25'>
<img src='redMarble.jpg' width='150' height='25'>
</div>

... but the images are still not cached by IE 6/Win. My image link
paths are all relative, not absolute btw.

Is there something wrong with my code? Is there a real
workaround? Or is this an example of when sometimes a bug is
just a bug and not a feature?

TIA

REFERENCES

http://msdn.microsoft.com/workshop/author/dhtml/reference/pro
perties/backgroundimage.asp

http://support.microsoft.com/default.aspx?scid=kb;en-us;319546
("When you run Internet Explorer, the Internet Explorer cache is
not used as you expect when you run innerHTML code to insert
the same image multiple times. .... RESOLUTION Preload the
image in a DIV element with the display:none attribute[.] ....
STATUS This behavior is by design.")

http://dhtmlnirvana.com/content/blog.html
("Preloading Hover States Bug: Zeldman in his essential
sections describes a technique for preloading background
images in standards based browsers with the hover state. Great
idea in practice, however it falls short in its implementation. The
problem is that Internet Explorer 6 does not preload the hover
state and instead of using the background image from the
cache, does a hard reload of the image, making for sloppy
rollover effects. / If you have Internet Explorer 6 and a slow
modem (56k or less) the problem is quite evident at Zeldmans
home page. Use larger images and the problem is exaggerated
further. / To overcome the problem, hard code the image in the
body section of the document. This forces Internet Explorer 6 to
use the image from the cache and you end with a nice smooth
rollover. To hide the image used in the body section, simply set
its display to none. More information on this technique in the next
edition of the newsletter.")

http://www.netmechanic.com/news/vol6/javascript_no1.htm
("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. .... 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.")