PNG image problems

[greenboi]

Hi,
I have several problems with using a partly transparent PNG Image as a link on my site. Firstly, it gets a grey background in IE6, so that the background color doesn't show through. I wonder, is there any workaround for this?

More importantly, I have the a:hover state set in HTML. I want the image to be swapped for a different one on mouse over. Because this causes a loading time of a few seconds on the first hover, I did the following:
HTML:
<div id="logo_hover">
<a id="logo"/>
</div>
CSS:
a#logo
{
background-image:url('titel.png');
display:block;
}
a#logo:hover
{
background-image:none;
}
div#logo_hover
{
background-image:url('titel_hover.png');
display:inline;
}
div#logo_hover:hover
{
display:block;
}

what this does in IE and Firefox is it puts the mouse over image behind the link image. when the mouse is over the link its background image is removed and lets the mouseover image show through.
however in chrome and safari this doesnt work. what can I do?

[lystar]

IE6 (as far as I know) does not support transparency in png's very well.
Edit: Try reading this article...http://24ways.org/2007/supersleight-transparent-png-in-ie6

As for your hover image issue. I'm pretty sure there is a way to "preload" the image using the onLoad attribute in the body element. The loading time you experience is because the browser is downloading the file, which you probably already knew, but using the onLoad function, the browser already has the image cached and ready to go.

Its been a really really long time since I've used onLoad, so I can't explain it in great detail but check out what W3schools (http://www.w3schools.com/jsref/jsref_onload.asp) has to say about it.

Hope that helps.