JS Rollover; png-image sticks after mouse-out.

For various reasons, I'm using Javascript rollovers to change css background-image properties. Upon rollover, I change the background image on an <li> element to a png (the htc file is applied to this element). When I mouse-out of the element, my javascript function changes the background-image to "none" - but the png doesn't go away.

Note  that the transparency functionality is working fine.

The rollover works fine in FF, so I know I don't have an error in my JS.

Should this work? Is swapping the css background-image property via Javascript supported by iepngfix.htc (I've tried both RC4 and RC5)?

I downloaded RC5 today (March 1st, '08).

My  JS isn't using classname changes; I get the element by id, and then do elem.style.backgroundImage = "none"; upon mouse-out.

I just switched over my rollovers to use whatever:hover in order to get around this, and indeed, it does all work now. The only thing is that now there's that split second before the iepngfix filter kicks in where I see a non-transparent version of the image. That wasn't there before I added csshover.htc in conjunction with iepngfix, but it's no big deal.

Again, thanks for your help, and your excellent scripts.

Try the whatever:hover fix with your page then if there are bugs with your layout? I do know that JS image swapping works as there is an image rollover in the example script demonstration.

- Angus.

Ah! Be very careful with *getting* the SRC attribute of the image. Remember the script changes it to blank.gif so your current approach will break there. Try:

<img src="AAA" onmouseover="this.src = 'BBB';" onmouseout="this.src = 'AAA';">

I know you have to type the SRC twice but trust me it's simplest ;).

Good  luck - Angus.

Same problem. Just don't use the DW rollover code, use the code I posted above instead.

- Angus.