「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法
Javascript2008年3月20日
IE7がPNG画像に対応しましたが、まだまだIE6ユーザーも多いため、実際のところまだしばらくPNG画像は使えないのが現状です。
色々なところでPNGをIE6に対応させるスクリプトが配布されていますが、ブロックレベルに内包されているaタグのリンクが機能しなくなる、img直置きに対応していないなど、弱点がいくつかあるのが現状です。
何とかできないものかと、先日会社のプログラマーの方と試行錯誤してみたところ、意外とあっさり完全に対応させることに成功いたしました。
これでデザインの幅が大幅に広がった今日この頃です。
手順1
まず、以下のサイトよりiepngfix.jsをダウンロードしてください。
- ソースの<head>~</head> に以下のソースを記述し、スクリプトを読み込みます
<script src="xxx/iepngfix.js" type="“text/JavaScript”"></script>
- 任意のIDまたはclassにアルファ画像(PNG画像)を背景に設定し、以下のCSSを記述します
behavior: expression(IEPNGFIX.fix(this));
- ※imgタグを配置する場合も同様の記述をします。
とりあえずはこれで、IE6でも背景やimgにPNG画像を使うことが可能になります。
次に、ブロックレベルに内包されるaタグが機能しなくなるバグを解決します。
手順2
imgタグの画像をロールオーバーさせる場合
<img id="navi01" src="images/navi01a.png" alt="sample" /> <script language="javascript" type="text/javascript"> var navi01 = document.getElementById('navi01'); IEPNGFIX.hover(navi01, 'images/navi01b.png); </script>>
aタグのバックグラウンド画像をCSSを使ってマウスオーバーで変更する場合
a#navi01{ display:block; width:22px; height:22px; background: url(images/navi01a.png); } a#navi01:hover { background: url(images/navi01b.png); }
<a id="navi01" href="#"><span style="display: none;">サンプル</span></a> <script language="javascript" type="text/javascript"> var navi01 = document.getElementById('navi01'); IEPNGFIX.hover(navi01, 'images/nav01b.png'); </script>
javascriptを外部化すれば、かなりすっきりするでしょう。
以上の作業で、IE6でも自由自在にpng画像を使用することが可能になります。
最近どうしても実務でpng画像を使わなければいけなかったので、色々な方法を試してみたのですが、この方法が一番よかったように思います。
CSSもいつもどおりの記述ですし、平たくいってしまえばjavascriptを読み込むだけですから。
この記事を読んでいる方にオススメの記事
- JavascriptPNG透過ライブラリにまつわる問題を全て解決したuupaa-suketrans.js
- Javascript第2回/Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
- JavascriptIEで右クリックを禁止するJavascript
- JavascriptPNG対応JSの決定版「DD_belatedPNG」
- JavascriptIE6以下をIE7と同じ解釈にするjavascript「IE7.js」
- Javascript第1回/Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
- ※承認制のため、即時には反映されません。
この記事にコメントする