このページはIE7で致命的なエラー出るという情報を頂き、暫く公開を中止して 修正予定のまま放置しておりましたが、ようやく修正致しましたので再び公開します。
PNGのアルファチャンネルによる 透過（半透明）もサポートされていないインターネットエクスプローラ６。 (GIFと同レベルの２５６色での単色透過は問題ありません) バージョン７でようやく半透明PNGがサポートとなりましたが、他のブラウザと比較して 余りにも遅れすぎ…。 更にIE7は、Windows Vista、Windows XP、 Windows Server 2003だけですね。これらより古いWindowsには使えません。 そして2006年末の現時点では、まだまだIE6 のユーザーが圧倒的に多いようです。
WEBサイトを作る側からすれば困った問題ですね。うかつに透過PNGを使ってしまうと、 IE6ユーザーから見ると「透過失敗してる…不細工！」なんて思われてしまいそう。 う〜ん、IEは技術的に可能なのにわざとサポートしてないとか…？ そんな風にも思えるのはMac OS用のIE5ではサポートされているという事と、 WindowsのIE5.5や6でも正常に表示させる方法があるためです。 WindowsのIEと他のブラウザで半透明な透過PNGの表示を確認してみましょう。 サンプルの画像はPNG 400x100 RGBA インターレース、圧縮レベル9で背景色は 白で保存しています。
(1)
通常のimgタグ。WindowsのIE5.5〜6では透過部分が白く見える。
透過部分は背景色が設定されていないPNG画像では青っぽいグレーになる。
<img src="welcome_g.png" alt="Welcome"> |
|
(2)
DirectXのAlphaImageLoaderを使って表示。
WindowsのIE(5.5以上)でのみ表示できる。画像のサイズ指定は必須。 ※ AlphaImageLoaderは、DirectXをバージョンアップしたときなど、稀に効かないこと があるようです。その場合、IEの再インストールが必要。 <span style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='welcome_g.png',sizingMethod=scale); width:400px; height:100px;"></span> |
|
(3)
AlphaImageLoaderとobjectタグ使用。
Windows95+IE5.5SP1でも表示不能。 <object data="welcome_g.png" type="image/png"> <span style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='welcome_g.png', sizingMethod=scale); width:400px; height:100px;"></span> </object> |
|
(4)
AlphaImageLoaderとimgタグを使い、JavaScriptでActiveXならimgは表示しない
ようにする。多分WindowsのIE(5.5以上)でも他のブラウザでも正常に表示できる。
但し、Windows用のIE5.01以下（もう使用者はいないと思うが…）は画像自体が
表示されないはず。 element.style.display = "none"; の部分は element.style.visibility = "hidden"; でもOK。 ※ img要素のonload属性はHTMLとして正しくありませんが、IE用に使用しています。
<script type="text/javascript"><!-- function wie(element) { if (window.ActiveXObject) element.style.display = "none"; } // --></script> <span style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='welcome_g.png', sizingMethod=scale); width:400px; height:100px;"> <img src="welcome_g.png" alt="Welcome" onload="wie(this)"> </span> |
|
(5)
AlphaImageLoaderとimgタグを使い、IEの条件分岐コメントとIE6以下のバグを
利用して IE5.5以上ならimgは表示しないようにする。
この方法はJavaScriptが無効となっていても問題無いため、恐らく(4)より確実。 ※ この条件分岐コメントはスタイル要素が入っているためヘッダ内に置きます。 ※ WindowsのIE6以下はCSSプロパティの頭に余分な記号を付けても、このプロパティを エラーとして無視しない（認識する）バグがあります。 CSSハックとして、この記号にはアンダースコアがよく用いられます。 ※ 条件分岐コメントのIE5.5の記述を間違えていたので訂正しました。 orz
<style type="text/css"> .ail img { _display: none; } </style> <![endif]--> <span class="ail" style="_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='welcome_g.png', sizingMethod=scale); _width:400px; _height:100px;"> <img src="welcome_g.png" alt="Welcome"> </span> |
|
(6)
AlphaImageLoaderとimgタグにIEの条件分岐コメントのみで対応。
IE5.5と6にのみAlphaImageLoaderを適用させる点は(5)と同様。 ※ (5)と同様に条件分岐コメントの部分はスタイル要素が入っているためヘッダ内に 置きます。 ※ (6)と(7)のマークアップで、classとするところをidと書き間違えていたのを こっそり訂正しました。（恥）
<style type="text/css"> .ail { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='welcome_g.png', sizingMethod=scale); width:400px; height:100px; } .ail img { display: none; } </style> <![endif]--> <span class="ail"><img src="welcome_g.png" alt="Welcome"></span> (7) JavaScriptが有効でなければならないが、expression()を使って(6)のCSSを次のように するとAlphaImageLoaderに画像ファイル名、縦横サイズを自動判別させることが可能。
<style type="text/css"> .ail { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .ail img { visibility: expression("hidden"); } </style> <![endif]--> <span class="ail"><img src="welcome_g.png" alt="Welcome"></span> |
結果的に(4)または(5)、(6)、(7)のような方法しか適当なものが思い付きませんが、 イメージマップ等との併用は無理なようです。また、AlphaImageLoaderで表示された 画像は右クリックによる画像の表示／保存が出来なくなります。
（注）標準準拠モードでは AlphaImageLoader が効かなくなりますので使用出来ません。 （IE6以上）
Windowsに付属という性格から最も使用されているIE6が半透明PNGをサポートして いないのは遺憾です。と言うより正直言って迷惑です。(爆) Internet Explorer http://www.microsoft.com/japan/windows/ie/default.mspx