hovering background image problem with IE

[e1seix]

rather simple code really, don't think i need to post the full html code. the idea obviously being that when the user hovers over a link, the background image changes to a different image and back again when not hovered over.

 

in Firefox, not a problem - in IE, the hovering background image remains when the user has stopped hovering over the link

 

#advice { float:left;height:150px;width:450px; }
#advice a img { background-image:url('/images/advice.jpg');border:none;height:150px;width:450px; }
#advice a:hover img { background-image:url('/images/shop.jpg');border:none;height:150px;width:450px; }

#shop { float:left;height:150px;width:450px; }
#shop a img { background-image:url('/images/shop.jpg');border:none;height:150px;width:450px; }
#shop a:hover img { background-image:url('/images/advice.jpg');border:none;height:150px;width:450px; }

 

The actual HTML image (advice_shop.gif) is of course transparent

 

echo '<div id="advice"><a href="/advice/"><img src="/images/transparent/advice_shop.gif" /></a></div>';
echo '<div id="shop"><a href="/shop/"><img src="/images/transparent/advice_shop.gif" /></a></div>';

 

[The Little Guy]

for the best affect, I would recommend using one image instead of two images. It is much more clean, and avoids an image flicker between the change.

 

Here is how to do it:

http://www.redvodkajelly.com/blog/2007/06/15/css-image-rollovers/