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:

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