IE < 7.0 で透過 PNG を透過して表示する

ググるといろいろ出てくるけど、オレ流の実装。

function transparentizePNGwithVML() {
    document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
    document.createStyleSheet().addRule("v\\:*", "behavior: url(#default#VML);");

    for (var i = 0; i < document.images.length; ) {
        var oldImage = document.images[i];
        if (!oldImage.src.match(/\.png$/i)) {
            i++;
            continue;
        }
   
        var image = document.createElement("v:image");
        image.src = oldImage.src;
        image.style.width = oldImage.width;
        image.style.height = oldImage.height;

        oldImage.parentNode.replaceChild(image, oldImage);
    }
}

よくあるやり方は AlphaImageLoader を SPAN とかに適用するやり方だけど、それだと IE >= 5.5 じゃないといけないらしい。別に IE なんだからいいんじゃね?ってことで VML の image エレメントを使うやり方。VML 自体は IE >= 5.0 で使えるらしいけど、ちゃんと表示できるか検証してないのでご注意。

仕組みは単純。現在のドキュメントに含まれる画像を走査して、PNG ファイルを参照してたら同じ大きさの image エレメントに置き換えるだけ。使い方は上のスクリプトを直接 HTML に仕込むなり、外部ファイルにして読み込むなりしてから、

if (navigator.userAgent.match(/MSIE (\d+\.\d+)/) && RegExp.$1 < 7.0) {
    window.attachEvent("onload", transparentizePNGwithVML);
}

って感じで動かせばいい。

ちなみに、AlphaImageLoader バージョンもあるのでどうぞ。

function transparentizePNGwithFilter() {
    for (var i = 0; i < document.images.length; ) {
        var oldImage = document.images[i];
        if (!oldImage.src.match(/\.png$/i)) {
            i++;
            continue;
        }
   
        var image = document.createElement("span");
        image.style.width = oldImage.width;
        image.style.height = oldImage.height;
        image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldImage.src + "',sizingMethod='scale');";

        oldImage.parentNode.replaceChild(image, oldImage);
    }
}

どちらにしろ、クリッカブルマップが使えないとか問題があるけど、それはしょうがない。

2007-08-20 22:46 追記
ほいで、イメージボタン (<input type="image" />) で透過するには AlphaImageLoader を使う。たとえば、以下の通り。別途、全体が透過された任意の GIF ファイルを null.gif として用意する。

function transparentizeImageButton() {
    var inputs = document.getElementsByTagName("input");

    for (var i = 0, l = inputs.length; i < l; i++) {
        var input = inputs[i];

        if (input.type != "image" || !input.src.match(/\.png$/i))
            continue;

        input.style.width = input.width;
        input.style.height = input.height;
        input.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + input.src + "',sizingMethod='scale');";
        input.src = "null.gif";
    }
}