How to maintain PNG alpha transparency when using “-ms-filter” property

Question

I have the following HTML:

 Some text

And this css:

a:hover
{
    -ms-fi         


        

Answer 1

For people looking for another answer, I solved this using this following code I wrote myself in plain JavaScript, so it's framework independent. Still you have to put it inside your framework's DOM ready event (or you can use domready.js like I did). It loads all the images with .PNG extension with the AlphaImageLoader. It has to be done before your apply the Alpha filter (you can apply the filter after this code with JS also).

The code below:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

Remember to put it inside conditional comments for IE:

<!--[if IE]><![endif]-->

Please let me know if it worked fine. Kind regards!

Answer 2

Just embellishing SpliFF's answer, I could fix this problem by adding the following jQuery to my page:

$(function() {
    if (jQuery.browser.msie)
        $('img[src$=".png"]').each(function() { // must have quotes around .png
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
});

This will apply the AlphaImageLoader too all PNGs in the page.

Answer 3

UPDATE: AlphaImageLoader filter applied directly to the img may override the Alpha filter. As for removing a filter have you tried filter:none; ?

Yes, programmically target IE6 and below with conditional comments.

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

Also scripts like IE7-js will handle PNG transparency for you without cluttering up your CSS with non-standard code.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->