Fading PNG in Internet Explorer not working

Question

I have a div which contains a PNG image, like this:

<div id="pop" class="pop_komm">
<img src="Graphics/komm.png">
</div>

I have a js code which is triggered on the "OnChange" event of a drop-list:

<select onchange="fadeIn('pop');" name="list" etc></select>

Here is the js code:

function setOpacity(eID, opacityLevel) {
    var eStyle = document.getElementById(eID).style;
    eStyle.opacity = opacityLevel / 100;
    eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}
function getElm(eID) {
    return document.getElementById("pop");
}
function show(eID) {
    getElm(eID).style.display='block';
}
function hide(eID) {
    getElm(eID).style.display='none';
}
function fadeIn(eID) {
    setOpacity(eID, 0); show(eID); var timer = 0;
    for (var i=1; i<=100; i++) {
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * 2);
        timer++;
    }
    setTimeout("fadeOut('"+eID+"')", 5000);
}
function fadeOut(eID) {
    var timer = 0;
    for (var i=100; i>=1; i--) {
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * 2);
        timer++;
    }
    setTimeout("hide('"+eID+"')", 310);
}

The problem is that the opacity makes the PNG corners rough and black, and the transparency of the PNG is not working good at all. I have tried using a pngfix, which does help IF the PNG has no "fade" effect. But as soon as I apply this fade effect I get the same problem.

Somebody must have solved this before, so please give me advice on how to solve it.

I googled and found this, but I don't really know what he means.

If you need more input let me know...

Btw, this works in all major browsers but IE6, 7 and 8.

Thanks

Answer 1

Yeah, setting alpha on a transparent PNG replaces the alpha channel completely with the opacity value, so the transparent parts come back into view.

As the page you linked says, you can put the alpha filter on an element that contains the PNG, which typically looks better, but that container element has to hasLayout. Add a height or zoom or whatever to the container to trigger IE's crazy hasLayout nonsense.

It's still not quite right, though, as you end up with each pixel having the minimum opacity of that pixel's alpha value and the set opacity, instead of multiplying the opacities. So the semi-transparent parts of the image end up with the wrong relative transparency. It can still look quite good as a fade-in effect, though.

Full multiplicative opacity can't be done in IE before IE9.