Internet Explorer (IE6、IE7、IE8) で遭遇する透過PNG画像のトラブルあれこれ

Internet Explorer 6~8 (IE6~8) の透過PNG画像表示

Flashを用いずにjQueryで画像をアニメーションしたい場合など、最近は動かしたいものを透過画像にバラしてレイヤー感覚で重ねたくなりますよね。でも依然として、Internet Explorer (以下IE)の透過PNG画像に対する挙動には手を焼きます。 なんとかしてIE8以下でもPNG画像をキチンと表示したい!

IEで遭遇しがちな透過PNG画像のトラブル

自分がWeb制作上、よく遭遇するPNG画像にまつわるトラブルをまとめてみました。 Web制作に触れていれば絶対に遭遇したことはある名問題ですね。分かっていても使いたくなる透過PNG画像。そして分かっていても遭遇してしまうIEでの透過トラブル。

  • IE6で画像の透過部分が灰色になる
  • jQueryなどでopacityを変動させると、IE6~8で画像の透過部分が黒くなる
  • jQueryなどで透過PNG画像を動かすと、IE6~8で画像の透過部分が黒くなる
  • 透過PNG画像を用いたクリッカブルマップの実装、どうしよう…

IE6~8で透過部分が灰色、もしくは黒色になる

単に透過PNG画像を設置した場合、もしくはjQueryなどでopacityや表示位置をアニメーションで変動させた場合に生じます。

症状

例えば、Firefox、Google Chromeといったモダンブラウザで以下のように表示される透過PNG画像。円の外周のオレンジ色の枠は半透明で、枠線の外側は完全に透明になっています。

モダンブラウザの透過PNG画像表示

これが、IE6ともなれば、以下のように表示されてしまいます。

Internet Explorer 6 (IE6) の透過PNG画像表示

そして、jQueryで透過PNG画像のopacityや表示位置をアニメーションでじわりじわりと変更すると、IE6~8で黒色のノイズが写りだすという現象が起きます。

Internet Explorer 6~8 (IE6~8) の透過PNG画像表示

解決策

「jquery.belatedPNG.min.js」を使います。プラグインは以下のサイトからいただきました。

プラグイン配布元

DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた

使用方法

プラグインを用いて、以下のようにコードを記述します。








    
透過PNG画像

ポイントは、透過PNG画像を参照しているimgタグに的を絞ってプラグインの透過処理を施してあげることです。なので例えば、透過PNG画像を参照しているimgタグに「pngfix」といったクラスを付加してあげます。

透過PNG画像を用いたクリッカブルマップが反応しない

症状

クリッカブルマップで透過PNG画像を用いる場合、「jquery.belatedPNG.min.js」を走らせているIEでクリッカブルマップが機能しなくなります。 分かりやすいように、クリッカブルマップにマウスカーソルがホバーされた時にアラートが表示されるようにしてテストしました。

モダンブラウザ

モダンブラウザの透過PNG画像クリッカブルマップ

モダンブラウザでは jquery.belatedPNG.min.js が走っていないので、当然アラートが表示されますね。

jquery.belatedPNG.min.js を走らせない場合のIE (例. IE6)

Internet Explorer 6 (IE6) の透過PNG画像クリッカブルマップ (jquery.belatedPNG.min.js 未使用)

jquery.belatedPNG.min.js が走っていないので当然、マウスカーソルが乗るとそれを感知してアラートが表示されます。でも、透過部分は灰色になってしまっていますね。 なので、jquery.belatedPNG.min.js を施してみると…

jquery.belatedPNG.min.js を走らせた場合のIE (例. IE6)

Internet Explorer 6 (IE6) の透過PNG画像クリッカブルマップ (jquery.belatedPNG.min.js 使用)

画像の透過問題は解決されますが、マウスカーソルを乗せてもうんともすんとも言わなくってしまいます。

解決策

…といいたいところですが、実は解決策が見出せていません。もし解決策が見つかれば、もちろんこの記事で追記したいと思っています。

代替案
  • GIF画像が使えれば jquery.belatedPNG.min.js に頼らずに済む
  • 単純な図形ならば、areaタグのcoords属性の座標情報と、マウスカーソルの位置情報を用いてjQueryでホバー判定の処理が出来るかも
  • 透過PNG画像を用いたクリッカブルマップを諦める

いずれにしても、クリッカブルマップに透過PNG画像を用いると、恐ろしく大変になるので、デザイン段階から避けたほうが良いかなと思います。