MOMENTS Old Diary

_ [つれづれ] 朝

07:00am起床。

_ [Web管理] αチャネル付きPNGをInternetExplorer5.5以上で利用する

せっかく、Now Playing for Windowsの生成するPNG画像がαチャネル付きで利用できるというのに、8割以上のアクセスを誇るInternetExplorerでは、通常透過が利用できません。

これに対する解決策としては、簡単にぐぐってみるだけでも、などが参考になりました。が両者ともに一長一短で思ったように簡単な利用が出来ませんでした。前者は別途Javascriptを読んで、その中の関数を使っているし、後者はDTDでXHTML 1.0を宣言していないと有効に動作しません。tDiary内では通常HTML4.01 Strictが宣言されているので、どうにも上手くいきませんでした。

そこで見つけたのが、。で利用されているようで、ActiveXが有効になってさえいれば、面倒な手間もかけずに、普通にimgタグにて画像を表示するだけで、透過した画像を表示してくれます。IEが透過PNGをサポートしているわけではなく、IE独自のフィルタの実装(AlphaImageLoader)を利用しているわけですね。

実際の使い方としては、Behaviorで紹介されているソースを適当な名前で保存して、

<style type="text/css">
img {
   behavior: url("pngbehavior.htc");
}
</style>

img要素に対してスタイルを指定してやればOK。ただしActiveXが有効になっていないと、全てのPNG画像がIEで表示されなくなってしまうため、今回は透過画像用にclassを指定してやることで解決。

IE7では透過PNGも標準でサポートされるようですし、それまでの繋ぎですね。