PNG alpha transparency on Windows IE 5.5 and 6

前几天作项目的时候, 发现透明的Png文件在IE 6下显示的很糟糕,如是,通过google, 发现这个方法是目前最好使用的方法.

1. 判断当前浏览器

     如果浏览器不是IE 6, 则处理无效.

Code
 1var itsAllGood;
 2if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
 3    var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
 4    itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5 && Number(rslt[1]) < 7);
 5    if(itsAllGood)
 6    {
 7        document.writeln('<style type="text/css">img, input.image { visibility:hidden; } </style>');
 8        window.attachEvent("onload", fnLoadPngs);
 9    }
}

 

     2   全局处理函数

     

Code
 1function fnLoadPngs() 
 2{
 3    for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) 
 4    {
 5        if (img.src.match(/\.png$/i) != null) 
 6        {
 7            fnFixPng(img);
 8            img.attachEvent("onpropertychange", fnPropertyChanged);
 9        }
        img.style.visibility = "visible";
    }

    var nl = document.getElementsByTagName("INPUT");
    for (var i = nl.length - 1, e = null; (e = nl[i]); i--) 
    {
        if (e.type && e.type.match(/\bimage\b/i) != null) 
        {
            if (e.src.match(/\.png$/i) != null) 
            {
                fnFixPng(e);
                e.attachEvent("onpropertychange", fnPropertyChanged);
            }
            e.style.visibility = "visible";
        }
    }
}

function fnPropertyChanged() 
{
    if (window.event.propertyName == "src") 
    {
        var el = window.event.srcElement;
        if (!el.src.match(/x\.gif$/i)) 
        {
            el.filters.item(0).src = el.src;
            el.src = "../images/pngfix.gif";
        }
    }
}

 

     3   单个文件处理

     

Code
function fnFixPng(img) 
{
    var src = img.src;
    if(img.width != 0)
    {
        img.style.width = img.width + "px";
        img.style.height = img.height + "px";
    }
    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
    img.src = "../images/pngfix.gif";
}

function fixPNG(img, register) 
{
    if (itsAllGood && img.src.match(/\.png$/i) != null) 
    {
        var src = img.src;
        if(src.indexOf("empty") == -1)
        {
            fnFixPng(img);
            if(register == "true")
                img.attachEvent("onpropertychange", fnPropertyChanged);
        }
        img.src = "../images/pngfix.gif";
        img.border = 0;
    }
    img.style.visibility = "visible";
}