IE５でアルファチャンネルPNGを使うための一番簡単なライブラリ　あるいはIEの失われたテクノロジに驚異せよ

CSS JavaScript

なんかはやってるみたいなんで作ってみました！ 一番設定が簡単だと思う。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はさらに独自タグ（複数エレメントとイベント込み）とかも設定できる、まさに構造と見た目と振る舞いの分離。おまえらのいるところはマイクロソフトが１０年前に通り過ぎた道だ！ハイル・ゲイツ！ハイル・ゲイツ！
当然IE専用なのでIEでしか動きません。よけいなブラウザ判定とかなくても大丈夫。あ、今回のコードIE7よけしてないや　ま、いいか　つうことでIE用のハックは豊富なIE専用機能を使えばいいんじゃね？ というお話でした。将来的にMozillaとかOperaとかでbehaviorが使えるようになって泣いても保証しません　つうかMozillaとかで使えるようにならんかなぁ…

*1:コメント欄でnanto_viさんに教えてもらいました。progidフィルタは5.5以上だそうで。DHTML Behaviorは5以上で動きます…つうことはie5.0よけしないと…あとで書く