PC

IE6で透過PNG画像を扱う

webページで、背景が透ける画像といえば、透過GIF画像が定番だが、
jpegはそもそも透過の機能がないから、 PNG画像を使いたいんだけど、未だブラウザのシェアの大部分を占めるIE6ではこの透過PNG画像をちゃんと扱えない。

あるお客さんのページを作るに当たって、この透過PNGを使う必要がでてきたので、改めてネットで調べてみたら、予想以上に同じことで悩んでいる人が多くてびっくりした。そのせいか、いろいろな解決策が見つかった。
そのうちの一つに、アルファ画像を扱うalphafilter.jsライブラリ[to-R]にあるように、javaScriptを読ませておいて、該当箇所にclassを指定するというお手軽な方法があった。画像だけでなく、ほかのタグからも指定ができるので、かなり使い勝手がいい。
ポイントは、IE6のときだけ、以下のようにDirectXで画像を表示させるということらしい。

element.style.filter =”progid:DXImageTransform.Microsoft.AlphaImageLoader (src=”+newimg+”,sizingMethod=’image’)”;

早速使ってみると、なかなかいい。

だが、どうもJavaScriptを使って動くメニューの部分で期待通りに機能してくれない。
マウスオーバーなどのアクションでメニューの画像が切り替わる部分で、うまく動いてくれない。
これには参った。
CSSハックで、ブラウザごとの挙動の違いに対応するなんてのが、当たり前のように行われているけど、これほどのバッドノウハウは無いよな。
もう一度画面を見直してみると、メニューの画像の背景は、単色で、透過。DWのCSSの設定ダイアログをみてたら、スタイルとして透過させるという方法があることに気がついた。透過な画像を用意するのではなく、透過しない画像を用意して、それに対して透明度を指定する。
やってみると案外これがうまくいくのね。
元々グレーを使いたい箇所だったので、ほぼ黒な画像を用意して、透明度を上げていく。。。。するとIE6でもOperaでもFirefoxでも同じように表示された。

先の透過画像を扱うのではなく、範囲全体に透明度が与えられるので、文字とかの色が薄くなってしまうから、使う場所などは考えないといけないが、今回は非常にうまくいった。
まぁ、忘れないようにメモ。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください