2007.09.16
IE6以下で透過PNGを使用する（JavaScript使用）
最近Webサイトでよく見かける透過PNG。まず上の画像を見てください。（できればIE6以下で見て欲しいです）
背景が白だったら透過処理しています。背景がグレーだったら透過されていません。モダンブラウザ（FireFox,Opera,Safariなど）では問題なく表示されるんですが、IE6以下ではPNGの透過処理がされないんです。そこで、透過PNGをIE6以下でも使えるようにするちょっとしたテクニックを紹介します。
iepngfix.jsを使う
- 1. まずユンサンの「透過PNGとIEとIE7まとめ」からiepngfix.jsをダウンロードします。
- 2. iepngfix.jsファイルをアップロードして<head>から</head>の間に以下のコードを書きます。
<!--[if IE]> <script src="iepngfix.js" charset="utf-8" type="text/javascript"></script> <style type="text/css"> .iepngfix { behavior: expression(IEPNGFIX.fix(this)); } </style> <![endif]-->
- 3. 透過したいPNG画像にクラス名、またはID名を追加すれば完了です。
<img src="alpha.png" width="140" height="90" alt="" class="iepngfix" />
- ※必ず条件分岐（<!--[if IE]><![endif]-->）の間にJavaScriptとCSSをセットで書き込んでおきます。条件分岐の間にJavaScriptだけ書いて、外にCSSを指定した場合、IE以外のブラウザだと「iepngfix.jsが見つかりません」みたいなエラーがでます。
