IE6用透過PNG表示 DD_belatedPNG.js

calendar

reload

IEの自動アップグレードが発表されて、ようやくIE6の呪縛から逃れられるとほっとした Webデザイナーも多いはずです。とはいえクライアントの仕様書から IE6 の文字がすぐ消えるかといわれるとそうではありません。すくなくとも、あと2年くらいはIE6対策をしなくていはいけないのかなと僕は考えています。

なので、IE6 対策の筆頭格である『透過PNG対策』についてもまだまだ需要があると思うので、まとめてみました。

DD_belatedPNG.jsとは

DD_belatedPNG.jsとは、IE6で透過PNGを透過をのこしたまま表示させることができる Javascript です。
js を読み込み、class 指定を加えるだけで簡単に導入できます。
とはいえ、body、tr、td の背景要素には使用できないとか、background-position:fixed;にも使用できないなどの制限もあるようなので注意が必要です。

「DD_belatedPNG.js」の使い方

1、ダウンロード

下記URLから、ダウンロードします。
http://dillerdesign.com/experiment/DD_belatedPNG/
ボタンが二つあると思いますが、XX-min.js の方で問題ないです。

2、Javascript を読み込む

IE6のみで読込むようにを使って読み込みます。

DD_belatedPNG.fix(‘任意のID名、またはクラス名’);のところで、PNG画像に指定するクラス名を表記します。
上記例では[.png_img]としています。

3、HTML要素にクラスを指定する

HTMLにクラスを指定します。
背景画像として使用する場合は、囲っているタグにクラスを指定します。

注意事項

●body、tr、td の背景要素には使用できない
●background-position:fixed;にも使用できない
といった、使用制限があります。注意しましょう。

参考にした記事

ほぼ、下記記事の内容と同じになっています。
※自分なりにまとめたかったので記事にしました。『分かりにくいよ』って方は下記記事を参考にすることをお勧めいたします。
http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/
http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/