Feb 23, 2004

ieでPNGを表示させる

先日のエントリで言いっぱなしだったら「winのieでPNGちゃんと表示できないやん」(ちょっと脚色)と言われたので補足

普通に<img>タグを使ってPNGを指定するとie/winでは背景が透けません. (mac版は問題なし). 仕方ないのでAlphaImageLoaderを使用します.サンプルとして <table>タグ版をいじったのを以下に.

ソースの肝は以下の箇所です.

AlphaImageLoaderはfilterなのですが, srcパラメタをとります. 設定した画像に対するフィルタというよりは, blockの背景という感じのようです. なので, 透明のgif画像(blank.gif)を表示させてAlphaImageLoaderを使うという感じになります. ただこれでは他のブラウザの時何もでてこないので, ブラウザによって切り替えています. runtimeStyleで判断しているのは, あれこれポップアップを参考. もうちょっと「ちゃんと」処理しないといけないですが, ちょっと手抜き.ちなみに Safari, ie6/win, ie5/mac, Mozilla/Linuxで動作は確認.

googleすると, ie独自拡張のbehaviorを使う方法もでてくるかと思います. そっちのほうが奇麗ではありますね. まぁそこまでする必要があるのか… 背景とPNGファイルの数によりますけどね…

右がfilterを使ったPNG, 左がgif. 違いがわかる背景を選んでみました.


(5/27追記) document.writeを使わない方法についてはこちらに

14 comments:

  1. おぉ、ちゃんと透けてますね。ところが、本家N@Blogのページは白枠&バッテン付き。これを書きながら思ったんだけど、もしやしてblank.gifがみつからない???

    ReplyDelete
  2. もう解決してますが, その通りです.createElement()あたりでerrorがでるかもなので, もうちょっとちゃんとやらないとダメなんでしょうが…単純にuserAgentとplatformでブラウザ判断してもいいかもですが^^;;

    ReplyDelete
  3. ウチのサイトもやっと満足のいく(?)仕上がりに近くなってきました(笑)。ところで、ここに出ているスクリプトをコピペして、必要なところを入れ替えたのですが、ウチのブラウザ(IE 6.0)でスクリプトエラー出しました。原因はelseの直前の「}」と最後の「}」の後ろに「;」がなかったことなんです。組み込みの時に注意しないとダメですね(泣)。

    ReplyDelete
  4. elseの前の}の後ろに;をつけると意味が変わってしまいます. 多分そちらはいらないかと….実際catkickさんとこのtopはSafariだとトップのバーでてきてません.

    ReplyDelete
  5. なんとか透過PNGを表示させることができました。ありがとうございますです。

    ReplyDelete
  6. elseの後ろだけ「;」を取ったんですが…。こんどはちゃんと見えてます?

    ReplyDelete
  7. 問題ないようです

    ReplyDelete
  8. 透過pngファイルの作り方ここんところ、blogの話題ばっかりですが…(汗)。PhtoshopElement2.0で作る透過pngファイルの作り方です。 ツールにもよりますが、一番簡単に作れるのはおそらく透過gifファイルじゃないかと思いますだ。でもgifで作るとジャギーになっちゃったり、背景色を工夫しても、...

    ReplyDelete
  9. タイトルを透過pngにするCubeさんにアドバイスしていただいたので、画像設置の仕方を変え、透過pngのタイトルロゴを作って表示できるようにした。右往左往しながら、結果的にはうまくいった。N@Blogさん経由、V.JCatkick@さん経由のAfternoon Cafeさんのエントリーの方法で画像を埋め込んだ。タイ...

    ReplyDelete
  10. 覚書:透過PNGの貼り方HSP(トガキュー)でAlphaImageLoaderを使った透過PNGを貼るのに苦労している方がいらっしゃるようなので、おさらい&貼り方、ついでにカタくなったノーミソが忘れた時のために覚書。 元記事はAfternoon Cafe氏のこちら。 <script type="text/javascript" src="http://...

    ReplyDelete
  11. WinのIEで透過PNGを表示させる方法サイトのデザイン変更につまずいています。大分骨格は固まって来たのですが、ここで問題発生。WinのIE環境だとPNGのアルファチャンネルが透過出来ないのです。以前N@Blogでこの話題が上っていたのを思い出し、Afternoon Cafeさんのサイトへ。 どうやらAlpha Image Loader...

    ReplyDelete
  12. 透過pngに挑戦N@Blogのスギヤマさんに教えてもらったページを参考に、タイトル画像の透過png化に挑戦しました。参考にしたのは、↓のページ。 透過pngファイルの作り方 ieでPNGを表示させる 覚書:透過PNGの貼り方 すごく、表示がきれいになりました(^^)。どんな画像が後ろに来ても、こ...

    ReplyDelete
  13. 覚書:透過PNGの貼り方HSP(トガキュー)でAlphaImageLoaderを使った透過PNGを貼るのに苦労している方がいらっしゃるようなので、おさらい&貼り方、ついでにカタくなったノーミソが忘れた時のために覚書。 元記事はAfternoon Cafe氏のこちら。 &lt;script type="text/javascript" src="htt...

    ReplyDelete
  14. トガキュー導入方法:私の場合[その3](この記事は、"トガキュー導入方法:私の場合[その2]"の続きです)さて、Window版IEでタイトル画像が透過してくれない件ですが、対策といたしまして、afternoon caf?氏のところで触れられている、AlphaImageLoaderというのを使用する事といた...

    ReplyDelete