ieでalphaチャンネル付PNGを表示させる

TrackBackの数を見ても, googleの検索キーワードを見ても, みんな悩んでるんだなぁと感じるieでPNGを透けさせる方法. トップ画像の共有プロジェクト(トガキュー)向けにsampleを出しましたが, JavaScriptのdocument.write()を使って HTMLを生成するのってあんまり好きでないんですよね. (といいつつここのtopでは使ってますが) JavaScriptをオフにしてると何も表示されないし. (<noscript>を併用すればいいのですが)

ということで, 前別口でオマケとしてだしたのですが, 誰もこっちは参照してくれないieでPNGを透けさせるちょっと一般的な方法についてまとめてみました.

■ サンプル

ieでPNGを透けさせるには, AlphaImageLoaderを使う必要があります(ie5.5以降のみ). このfilterは「指定した画像を上からかぶせる」フィルタです. すなわち, 「透明な画像」に「PNGをかぶせて」あげてれば, 所望の出力が得られるわけです. ただし, 「かぶせる」ことができるのはie5.5以降だけなので, それ以外のブラウザでは「透明な画像」ではなくて「PNG画像」のままにする必要があります.

ということで, AlphaImageLoaderが使える場合のみimgタグのsrcを「blank.gif」に変更して「PNGをかぶせる」関数changeImage()を作ります.

blank.gifは透明なGIFファイルです. 適当に用意してください. findElement()は以下のような関数. function findElement(n) { return document.all ? document.all(n) : document.getElementById(n); } 使い方は対象とするimgにidをつけます. widthとheightもあった方がいいかも.

<img id="hoge" src="foo.png" alt="gaga"> あとは, onloadでchangeImage()を呼び出します

<body onload="changeImage('hoge');"> これで, JavaScriptをOFFにしたieやie5.0では透けませんが, PNG画像は表示されます.

こんばんは。PNGの透過で悩んでいるもんです。
ようやくこの方法があると知り喜んだもののfunction以下のタクをどこにどう書いたらいいのかわかりません。
bodyのbackgroundには別のgifを入れるので、特定のtableの背景（CSSで）透過のpngを入れたいのです。
これが可能か否かでサイトのデザインががらっと変わってしまうので是非やりたいのですが、さっぱりわからないのです。（涙）どうが、一からこのおばかに教えていただけませんか？

fuku at 07/20 5:38 AM

まず, 1から教えるつもりはありませんのであしからず.
次に, これはimgタグでalphaチャンネル付PNGを表示する方法です.

で, tableのbackgroundでPNGが使えるかですが, 可能です.

最初からDOMを使うのは難解でしょうから, 2つのcssを用意して
table {
background-image: url('hoge.png');
}
と
table {
filter: progid:DXImageTransform.Microsoft
.AlphaImageLoader(src="hoge.png");
}
を切り替えてみてはどうでしょうか?

atsushi at 07/20 10:01 AM

Afternooncafe

ieでalphaチャンネル付PNGを表示させる