DD_belatedPNG.jsでIE6を透過PNGに対応させる：javascript

2011-12-07 JavaScript

IE6を透過PNGに対応させる方法を調べていたところ
DD_belatedPNG.jsというのが一番使いやすそうだったので
DD_belatedPNG.jsの使用方法をメモ。

1 DD_belatedPNG.jsをダウンロードする
2 DD_belatedPNG.jsの使用方法
3 DD_belatedPNG.jsを使ってもマウスオーバー出来るようにする
4 参考サイト

DD_belatedPNG.jsをダウンロードする

まず、
≫Drew Diller’s blog
こちらのサイトからDD_belatedPNG.jsをダウンロードします。
(左メニューからDD_belatedPNG 0.0.バージョンというとこをクリックしダウンロードボタンを探す。)
通常版と圧縮版がありますがどちらでもＯＫです。
ダウンロードボタンをクリックすると、ソースが表示されるので
ソースをコピーして名前を「DD_belatedPNG.js」とし保存すれば準備ＯＫ。

DD_belatedPNG.jsの使用方法

まず、HTMLのHEADタグ内に

<!--[if lt IE 7]>
<script src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('img, .png_bg');
</script>
<!<![endif]-->

と記述します。

＜!–[if lt IE 7]＞～＜![endif]–＞という部分はIE6以下に適用という意味です。
DD_belatedPNG.fix(‘img, .png_bg’);の‘img, .png_bg’という部分は、透過PNGをさせたいクラスや要素を指定する部分です。
(上記の場合imgタグと.png_bgクラスに適用)
この指定は、,区切りで複数指定できます。

あとは透過PNGをさせたいところに

<div id="container" class="png_bg">
<p><a href="#"><img src="images/img.png" class="png_bg" /></a></p>
</div>

のように、背景に使用するならdivタグに、画像に使用するならimgタグに
クラスを指定してあげればＯＫ。

※注意点として、
1.body・tr・td要素の背景には使えない
2.IMG内にonmouseover=等が動作しなくなる
(マウスオーバーを使う場合は次のやり方でやる)

DD_belatedPNG.jsを使ってもマウスオーバー出来るようにする

≫サンプル　※IE6で確認してください。
上記で書いたように
DD_belatedPNG.jsを使用するとjavascriptのマウスオーバーが出来なくなりますが、

<!--[if lt IE 7]>
<script src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('img, .png_bg');
</script>
<!<![endif]-->

の部分を

<!--[if lt IE 7]>
	<script src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
    var oldFixPng = DD_belatedPNG.fixPng;
    DD_belatedPNG.fixPng = function (el) {
        oldFixPng(el);
        if (el.vml && el.vml.image.fill.getAttribute("src").match(/_off\./)) {
            el.vml.image.shape.attachEvent('onmouseover', function() {
                var image = el.vml.image.fill;
                image.setAttribute("src", image.getAttribute("src").replace("_off.", "_on."));
            });
            el.vml.image.shape.attachEvent('onmouseout', function() {
                var image = el.vml.image.fill;
                image.setAttribute("src", image.getAttribute("src").replace("_on.", "_off."));
            });
        }
    };
    DD_belatedPNG.fix('img, .png_bg');
</script>
<!<![endif]-->

のように変更すればマウスオーバーが使えるようになります。
このマウスオーバーの使い方は
こちらの記事を参考にしてください。
ロールオーバー処理：javascript