IE6 で透過 PNG を使えるようにする javascript

IE6 でも透過 PNG が使えて、さらに background-image + background-repeat + background-position に対応した javascript が Drew Diller’s blog で公開されていました（javscript ファイルのダウンロードページ）。
※2009年11月19日10時57分 バージョンアップしているので、リンク先を 0.0.6a から 0.0.8a に変更しました。

IE6 で透過 PNG が使えるようになる javascript は結構色々ありますが、background-repeat や background-position に対応したものはあまり見かけないので、いざというときに活躍してくれるはずです。
ファイルサイズも圧縮版で約 5Kb と軽いです。

使い方は、

1. DD_belatedPNG.js を読み込む
2. head 内で DD_belatedPNG.fix() を呼び出し、適用させたい CSS セレクタを指定する

となっています。
具体的には、

<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.6a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.png_bg');</script>
<![endif]-->

IE6 以上のブラウザなどには意味がない指定なのでコンディショナルタグで他のブラウザには読ませないようにしています。
スクリプトのバージョンが 0.0.6a となっているので、今後もっと軽くなったりするのが楽しみです。

関連投稿

• 要素の高さをそろえるjQueryプラグイン
  category: jQuery > javascript tags: inline-block+javascript+jQuery.
• タイル状にアニメーションして画像を切り替えるjQueryプラグイン jFancyTile
  category: jQuery > javascript tags: javascript+jQuery.
• 透過PNGを使う時に注意すること２
  category: css tags: AlphaImageLoader+IE6+javascript+透過PNG.
• キャラクターと背景が動きまくるjQueryプラグイン（おまけつき） jQuery.spritely
  category: jQuery > javascript tags: javascript+jQuery.

posted on 2008.12.19 11:42am