先日のエントリで言いっぱなしだったら「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を使わない方法についてはこちらに
おぉ、ちゃんと透けてますね。ところが、本家N@Blogのページは白枠＆バッテン付き。これを書きながら思ったんだけど、もしやしてblank.gifがみつからない？？？
返信削除もう解決してますが, その通りです.createElement()あたりでerrorがでるかもなので, もうちょっとちゃんとやらないとダメなんでしょうが…単純にuserAgentとplatformでブラウザ判断してもいいかもですが^^;;
返信削除ウチのサイトもやっと満足のいく（？）仕上がりに近くなってきました（笑）。ところで、ここに出ているスクリプトをコピペして、必要なところを入れ替えたのですが、ウチのブラウザ（IE 6.0）でスクリプトエラー出しました。原因はelseの直前の「}」と最後の「}」の後ろに「;」がなかったことなんです。組み込みの時に注意しないとダメですね（泣）。
返信削除elseの前の}の後ろに;をつけると意味が変わってしまいます. 多分そちらはいらないかと….実際catkickさんとこのtopはSafariだとトップのバーでてきてません.
返信削除なんとか透過PNGを表示させることができました。ありがとうございますです。
返信削除elseの後ろだけ「；」を取ったんですが…。こんどはちゃんと見えてます？
返信削除問題ないようです
返信削除透過pngファイルの作り方ここんところ、blogの話題ばっかりですが…（汗）。PhtoshopElement2.0で作る透過pngファイルの作り方です。 ツールにもよりますが、一番簡単に作れるのはおそらく透過gifファイルじゃないかと思いますだ。でもgifで作るとジャギーになっちゃったり、背景色を工夫しても、...
返信削除タイトルを透過pngにするCubeさんにアドバイスしていただいたので、画像設置の仕方を変え、透過pngのタイトルロゴを作って表示できるようにした。右往左往しながら、結果的にはうまくいった。N@Blogさん経由、V.JCatkick@さん経由のAfternoon Cafeさんのエントリーの方法で画像を埋め込んだ。タイ...
返信削除覚書：透過PNGの貼り方HSP（トガキュー）でAlphaImageLoaderを使った透過PNGを貼るのに苦労している方がいらっしゃるようなので、おさらい＆貼り方、ついでにカタくなったノーミソが忘れた時のために覚書。 元記事はAfternoon Cafe氏のこちら。 <script type="text/javascript" src="http://...
返信削除WinのIEで透過PNGを表示させる方法サイトのデザイン変更につまずいています。大分骨格は固まって来たのですが、ここで問題発生。WinのIE環境だとPNGのアルファチャンネルが透過出来ないのです。以前N@Blogでこの話題が上っていたのを思い出し、Afternoon Cafeさんのサイトへ。 どうやらAlpha Image Loader...
返信削除透過pngに挑戦N@Blogのスギヤマさんに教えてもらったページを参考に、タイトル画像の透過png化に挑戦しました。参考にしたのは、↓のページ。 透過pngファイルの作り方 ieでPNGを表示させる 覚書：透過PNGの貼り方 すごく、表示がきれいになりました(^^)。どんな画像が後ろに来ても、こ...
返信削除覚書：透過PNGの貼り方HSP（トガキュー）でAlphaImageLoaderを使った透過PNGを貼るのに苦労している方がいらっしゃるようなので、おさらい＆貼り方、ついでにカタくなったノーミソが忘れた時のために覚書。 元記事はAfternoon Cafe氏のこちら。 <script type="text/javascript" src="htt...
返信削除トガキュー導入方法：私の場合[その3]（この記事は、"トガキュー導入方法：私の場合[その2]"の続きです）さて、Window版IEでタイトル画像が透過してくれない件ですが、対策といたしまして、afternoon caf?氏のところで触れられている、AlphaImageLoaderというのを使用する事といた...
返信削除