IE6で透過png画像ファイルを表示させるJavascriptライブラリ「DD_belatedPNG」

IE6以下は透過(アルファチャネル)PNGファイルに対応していなく、きれいに透過されない。
一般的にはDirectXのAlphaImageLoaderを使ってこの問題を解決するのだが、表示が遅くなる...background:repeatに対応していない...など制約があるらしい。

IE7だと透過されるPNGファイル

IE6だと透過部分がグレーで表示され透過されない

「DD_belatedPNG」というJavascriptライブラリは、AlphaImageLoaderではなくVMLという言語を用いることで、高速かつ制約なしでPNG画像を透過できる。

使い方は簡単。

次にHTMLに以下のように透過させたいエレメントのセレクタをDD_belatedPNG.fix('xxx');で指定する

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

CSSのようにidや(カンマ区切りで)複数の指定ができる。

DD_belatedPNG.fix('#png'); //idを指定
DD_belatedPNG.fix('.png1, .png2, .png3'); //複数指定

posted with amazlet at 10.07.01

Douglas Crockford
オライリージャパン
売り上げランキング: 14419

おすすめ度の平均:

手っ取り早く習得

痒いとこだけ掻いてくれる

JavaScriptを勉強しなおすのにとってもよいです。

JavaScript コアに関する最高の本