【IE6】DD_belatedPNGでPNG画像を透過させる

最近のブラウザではPNG画像の透過は当たり前ですが、

いまだにIE6の利用者は多数いて

「IE6でもPNG画像が透けて見えるようにしてチョ」

なんていう要求もある。

そんなとき

以前は『Microsoft.AlphaImageLoader』を使用するという方法をとったのですが

AlphaImageLoaderを使うのはIE6で透過PNGを表示させるためのもっとも有名な方法のひとつだが、処理速度が遅くなる上に大量のメモリを消費する。画像ごとにではなく要素ごとに適用されるため適用対象が増えればそれだけパフォーマンスも悪化しメモリ量も増えることになる。

というお話がある。

最近の主流ではAlphaImageLoaderの代わりにVMLを利用するらしい。

VMLといわれて調べてみたが、結構書き方がめんどくさい。

で、見つけたのがこれ。

JSファイルをインクルードして

DD_belatedPNG.fix('.png_bg'); // 引数でCSSのクラス名を指定。

こんな感じで利用。

IE以外では正しく動作しないのでIEの場合だけ利用するというような条件文が必要だが、なかなか使いやすい。

DD_belatedPNGはつい最近リリースされたもので、まだ日々進化中であるが

現在(2009/1/6)のバージョン0.07aでも十分利用できた。

Yuki@Yuki