2004/05/27

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()は以下のような関数. 使い方は対象とするimgにidをつけます. widthとheightもあった方がいいかも.

あとは, onloadでchangeImage()を呼び出します

これで, JavaScriptをOFFにしたieやie5.0では透けませんが, PNG画像は表示されます.

2 件のコメント:

  1. fuku2005/07/20 14:38

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

    返信削除
  2. atsushi2005/07/20 19:01

    まず, 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");}を切り替えてみてはどうでしょうか?

    返信削除

登録: コメントの投稿 (Atom)