« それから| Main | 数字を覚えるのが苦手 »
gear

ieでPNGを表示させる

04/02/23

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

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

■ ieでPNGを表示させるサンプル

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

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

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

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

■トップ画像を共有しようプロジェクト (N@Blog)
■あれこれポップアップ (ねこめしにっき)

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

■ ieでalphaチャンネル付PNGを表示させる
Comments & Trackbacks
Trackback URL for this entry : http://afternooncafe.jp/cgi-bin/mt/tb.cgi/55
ここんところ、blogの話題ばっかりですが…（汗）。PhtoshopElement2.0で作る透過pngファイルの作り方です。 ツールにもよりますが、一番簡単に作れるのはおそらく透過gifファイルじゃないかと思いますだ。でもgifで作るとジャギーになっちゃったり、背景色を工夫しても、...
透過pngファイルの作り方@V.J.Catkick@ at 03/08 1:45 PM
Cubeさんにアドバイスしていただいたので、画像設置の仕方を変え、透過pngのタイトルロゴを作って表示できるようにした。右往左往しながら、結果的にはうまくいった。N@Blogさん経由、V.JCatkick@さん経由のAfternoon Cafeさんのエントリーの方法で画像を埋め込んだ。タイ...
タイトルを透過pngにする@Teru's Dialog at 03/14 10:20 AM
HSP（トガキュー）でAlphaImageLoaderを使った透過PNGを貼るのに苦労している方がいらっしゃるようなので、おさらい＆貼り方、ついでにカタくなったノーミソが忘れた時のために覚書。 元記事はAfternoon Cafe氏のこちら。 <script type="text/javascript" src="http://...
覚書：透過PNGの貼り方@V.J.Catkick@ at 03/15 11:50 AM
サイトのデザイン変更につまずいています。大分骨格は固まって来たのですが、ここで問題発生。WinのIE環境だとPNGのアルファチャンネルが透過出来ないのです。以前N@Blogでこの話題が上っていたのを思い出し、Afternoon Cafeさんのサイトへ。 どうやらAlpha Image Loader...
WinのIEで透過PNGを表示させる方法@Luigi★Box at 04/03 3:52 AM
N@Blogのスギヤマさんに教えてもらったページを参考に、タイトル画像の透過png化に挑戦しました。参考にしたのは、↓のページ。 透過pngファイルの作り方 ieでPNGを表示させる 覚書：透過PNGの貼り方 すごく、表示がきれいになりました(^^)。どんな画像が後ろに来ても、こ...
透過pngに挑戦@でね。 at 04/03 5:24 PM
HSP（トガキュー）でAlphaImageLoaderを使った透過PNGを貼るのに苦労している方がいらっしゃるようなので、おさらい＆貼り方、ついでにカタくなったノーミソが忘れた時のために覚書。 元記事はAfternoon Cafe氏のこちら。 &lt;script type="text/javascript" src="htt...
覚書：透過PNGの貼り方@V.J.Catkick@ at 04/09 4:01 PM
（この記事は、"トガキュー導入方法：私の場合[その2]"の続きです） さて、Window版IEでタイトル画像が透過してくれない件ですが、対策といたしまして、afternoon caf?氏のところで触れられている、AlphaImageLoaderというのを使用する事といた...
トガキュー導入方法：私の場合[その3]@Powerbook Player's JAM at 04/15 4:48 AM

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

catkick at 02/23 10:57 PM

もう解決してますが, その通りです.
createElement()あたりでerrorがでるかもなので, もうちょっとちゃんとやらないとダメなんでしょうが…

単純にuserAgentとplatformでブラウザ判断してもいいかもですが^^;;

atsushi at 02/23 11:21 PM

ウチのサイトもやっと満足のいく（？）仕上がりに近くなってきました（笑）。

ところで、ここに出ているスクリプトをコピペして、必要なところを入れ替えたのですが、ウチのブラウザ（IE 6.0）でスクリプトエラー出しました。原因はelseの直前の「}」と最後の「}」の後ろに「;」がなかったことなんです。組み込みの時に注意しないとダメですね（泣）。

catkick at 02/23 11:50 PM

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

atsushi at 02/24 8:34 AM

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

N@ at 02/24 12:08 PM

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

catkick at 02/24 12:59 PM

問題ないようです

atsushi at 02/24 1:09 PM
Comments
コメントを書く

catkick at 02/23 22:57
atsushi at 02/23 23:21
catkick at 02/23 23:50
atsushi at 02/24 08:34
N@ at 02/24 12:08
catkick at 02/24 12:59
atsushi at 02/24 13:09
(7 comments)
Recent Entries
02/02 mixi widget 2.1
01/19 三社参り
11/19 mixi widget 2.0
11/12 コトノコ2.0a9
11/07 京都に行こう
10/29 日光
10/20 mixi widget 1.14
10/13 層雲峡
10/04 冷蔵庫
10/03 十五夜
Powered by Movable Type 4.27-ja