「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法

Javascript2008年3月20日

2008/12/07追記

以下の記事で別の方法もご紹介していますので、あわせてお読みください。

jQueryで、透過pngをIE6に対応させる

IE7がPNG画像に対応しましたが、まだまだIE6ユーザーも多いため、実際のところまだしばらくPNG画像は使えないのが現状です。
色々なところでPNGをIE6に対応させるスクリプトが配布されていますが、ブロックレベルに内包されているaタグのリンクが機能しなくなる、img直置きに対応していないなど、弱点がいくつかあるのが現状です。

何とかできないものかと、先日会社のプログラマーの方と試行錯誤してみたところ、意外とあっさり完全に対応させることに成功いたしました。
これでデザインの幅が大幅に広がった今日この頃です。

手順1

まず、以下のサイトよりiepngfix.jsをダウンロードしてください。

透過PNGとIEとIE7

ソースの<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を読み込むだけですから。

この記事を読んでいる方にオススメの記事

「Javascript」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。