透過 PNG を IE6 で背景としても使える JavaScript
2007/12/29 Sat [Edit]
先日の記事「透過 PNG を IE6 でも奇麗に表示するクリスマス☆」では AlphaImageLoader と言う Filter（フィルター）を使い、透過 PNG を IE6 でも奇麗に表示させていました。
しかし、私は少し勘違いをしていたのですが、先日の方法だと透過 PNG を背景（ background ）に指定できないのです。
「じゃあ、どうすんの？」
はい。その答えは JavaScript が握っていました。
「えぇ〜？でも、なるべくなら CSS で解決したい問題なんだけど。」
そうですね。私も同意見ですが、おそらく今回ご紹介する解決策が現在（2007年の暮れ）主流のようです。
それでは、一人芝居を気持ち悪がられる前に、そろそろ「透過 PNG を IE6 で背景としても使える JavaScript」をメモしておきます。
まずは今回の JavaScript の作者であるユンサンさんのブログから「iepngfix.js」をダウンロード。
※右クリックでリンク先のソースコードを保存すると言う意味です。
次にそれを任意のサーバーにアップロードし、HTML の <head> 〜 </head> 内で読込みます。
<script type="text/javascript" charset="EUC-JP" src="iepngfix.js"></script>
※上のソースの赤い部分はアップロードした iepngfix.js のパスになります。
最後に、CSS 内で背景（ background ）に透過の PNG を指定したい ID や CLASS セレクタなどに以下のソースを追加するのですが、IE6 だけに適用させる為、今回はスターハック（ *html ）を用いて IE6 にだけ適用させます。
*html div#hajime { behavior: expression(IEPNGFIX.fix(this)); }
※上のソースの div#hajime は背景に透過の PNG を指定したいセレクタ名なので適宜に変更してください。
以上で透過 PNG を IE6 でも背景として使用できます。
●補足
behavior（ビヘイビア）とは IE5 からサポートされた、指定した要素に対し外部スクリプトを適用させる機能。
expression() は CSS 内で JavaScript を使用して動的にスタイルを指定できる IE の拡張機能。
おそらくですが「IE6 にかんぱ〜い♪チン」なんて一生無いと思います。
Comments
Track Backs
TB URL
で良いと思うに一票。
