IE5でアルファチャンネルPNGを使うための一番簡単なライブラリ あるいはIEの失われたテクノロジに驚異せよ
- http://d.hatena.ne.jp/amachang/20070206/1170715555
- http://labs.unoh.net/2007/02/ie6_png_fix.html
- http://web.kankodo.net/2007/02/01-233315.html
- http://phpspot.org/blog/archives/2007/02/iepngjavascript.html
なんかはやってるみたいなんで作ってみました! 一番設定が簡単だと思う。IE5IE5.5以上なら多分動く*1。 あとIEすごいよ!というお話
やりかた
1.次の内容を alpha.htc という名前で適当なところに置く
<SCRIPT LANGUAGE="JScript"> (function(){ runtimeStyle.filter += 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod=scale)'; src = 'clear.gif'; })() </SCRIPT>
2.同じところに clear.gif (誰でも持ってる透明のgifファイル)を置く( 上のスクリプトの clear.gif を適当なのに変更すると適当な位置におけるよ!)
3.透明にしたい画像はこんなHTML
<style> img.alpha{ behavior:url(alpha.htc) } </style> <img height="100" width="100" src="demo.png" class="alpha" />
クラスにalphaってつけるだけ! スタイルシートだから img.alpha じゃなくて img すべてとかに適用するやり方も簡単
サンプルは此方→ http://nazo.yi.org/poisute/alpha.html すいません、demo.png は id:amachang のサンプルからパクリました m(..)m
解説
IE は5から、DHTML Behaviorという*すばらしい*機能を持っています。これは、エレメントのクラスに対応して機能を割り当てる、というWeb2.0ダイスキッコ達がコードとデザインの分離とかで document.getElementsByClassName とかを自前で実装してごちゃごちゃ苦労して behavior.js とかいうパッチものを使って喜んでいる「あれ」を、ブラウザで行う方法です。DHTML Behaviorはさらに独自タグ(複数エレメントとイベント込み)とかも設定できる、まさに構造と見た目と振る舞いの分離。おまえらのいるところはマイクロソフトが10年前に通り過ぎた道だ!ハイル・ゲイツ!ハイル・ゲイツ!
当然IE専用なのでIEでしか動きません。よけいなブラウザ判定とかなくても大丈夫。あ、今回のコードIE7よけしてないや ま、いいか つうことでIE用のハックは豊富なIE専用機能を使えばいいんじゃね? というお話でした。将来的にMozillaとかOperaとかでbehaviorが使えるようになって泣いても保証しません つうかMozillaとかで使えるようにならんかなぁ…
*1:コメント欄でnanto_viさんに教えてもらいました。progidフィルタは5.5以上だそうで。DHTML Behaviorは5以上で動きます…つうことはie5.0よけしないと…あとで書く