トップ «前の日記(2005年05月22日) 最新 次の日記(2005年05月24日)» 編集

MOMENTS


2005年05月23日 [長年日記]

_ [つれづれ]朝

07:00am起床。

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

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

これに対する解決策としては、簡単にぐぐってみるだけでもhttp://www.afternooncafe.jp/archives/04_02_23_gear.htmlPNG ちょっと裏技 (4):Windows版 IE 5以降の VMLレンダラで半透明、透過PNGを表示するなどが参考になりました。が両者ともに一長一短で思ったように簡単な利用が出来ませんでした。前者は別途Javascriptを読んで、その中の関数を使っているし、後者はDTDでXHTML 1.0を宣言していないと有効に動作しません。tDiary内では通常HTML4.01 Strictが宣言されているので、どうにも上手くいきませんでした。

そこで見つけたのが、PNG Behavior (WebFX)Desire for wealthで利用されているようで、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も標準でサポートされるようですし、それまでの繋ぎですね。

本日のツッコミ(全1件) [ツッコミを入れる]
_ TrackBack (2006年03月02日 10:24)

http://d.hatena.ne.jp/yune_kotomi/20060302/1141262604<br>未設定航路 -Phase#2-航海日誌<br>[開発]なだめすかして。<br>IE6以前はPNGサポートが腐りきってるので、いろいろといらいらするんですが、裏技がいくつか。 まず試したのがこれ。 PNG ちょっと裏技 (4) この方法、上手く動きます。メインターゲットのIE6でばっちり、元々不要なのでバイパスされるべき、シイラ、Firefox、Operaでも大..