IE6以前でpng透過画像を使用する
サイトのデザインをしていると、どうしても透過画像なんて物を使いたくなりませんか？
透過画像と言うと、GIFやPNGなんて物があるのですが、
GIF画像はどんなブラウザでも対応しているけど、影とかがギザギザで汚くてちょっとカッコ悪いですよね…
対するPNGはとてもきれいなのだけど、Win版のIE6（インターネットエクスプローラー6）以前ではまともに表示してくれない。。。
つうか、Win版のIEがPNGに対応してなかったりするので困りもの…
とは言え日本国内でIEのシェアは7割程あるので、
IEなんて嫌いだ！と言ってIEに合わせない訳にはいかないというジレンマ。。。
IE7でやっと対応したが、それでもIE6以前のユーザーはまだまだ多い。
ずっと諦めていたのだが、このサイトを作るにあたりなんとなく調べてみたら…
世の中には頭の良い方がいるもので、IEに合わせてJavaScriptを作ってくださった方がいるのだ。
ありがたい物です。(-人-)
ってな訳で、そんなスクリプトの紹介。
透過GIFと透過PNGの比較
左がGIFの透過画像。
このGIF画像はこのサイトのTOPに使用していたんだけど、
輪郭も中もギザギザでちょっとカッコ悪いですよねf^^;
Win版のIE6だけは仕方なしに
当初はこの画像をスタイルシートで分けて使用していました。
目立たせないような方法も有りますが、ちょっと使い辛いですよね～
こちらは透過PNG画像。
Windows版のIE6以前で見ると透過部分が透過できずに変な影がついてしまいます。
他のブラウザではきれいに表示されているはずです。
IE6、しかもWin版だけがダメだと言うこの現象、泣きたくなりますな（汗）
iepngfix.js でIE6以前のブラウザで透過PNGを使用する
前置きが長くなりましたが、ここで登場するのがiepngfix.js
作ったのは多分”韓流”プログラマのユンサン かな？
使い方は、iepngfix.js←を開いてソースをコピーし、ファイル名をiepngfix.jsとします。
こいつをサーバーにアップして、ページのメタタグに
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="スクリプトのパス/iepngfix.js"></script>を、head間に記入します。そして、
behavior: expression(IEPNGFIX.fix(this));を、画像を配置したスタイルシートの末尾に記入します。
画像の配置タグsrcの末尾に、style="behavior: expression(IEPNGFIX.fix(this));" としてもOKです。
<img alt="folda-r.png" src="folda-r.png" width="283" height="208" style="behavior: expression(IEPNGFIX.fix(this));" />こんな感じです。
すると、こんな感じでIE6でも透過PNGがちゃんと使用できるようになります。
この記事では丁度上の画像の背景が切れてしまっていて分かりにくいですが、透過の確認をしたい方はTOPページで確認してみてください。
透過PNGが使用できると、デザインの幅もかなり出てくると思いますYO
IE6以前でpng透過画像を使用するに関連したエントリー
<<<前の記事へ | 次の記事へ>>>
Copyright(C) 2008 ホームページ作成SEOマニアックス Allrights reserved.