こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

PNGがうまく表示されない・・・。

お世話になります。

PNG画像で分からないことがありますので申し訳ありませんが、わかる方がいらっしゃいましたらお知恵をお貸しください。

以前からホームページでPNG画像を使って重ね合わせて使用していたのですが、最近になりIEのバージョンによって動作が変わってしまうということを知り、確認したところIE5.5とIE6の場合だとPNGの透明部分が灰色になってしまい、背景が見えなくなっていました。

そこでIE5.5~IE6まででも綺麗にみえるようiepngfix.jsというスクリプトを使用してみました。

設定して確認したところ、IE5.5 IE7 IE8とFireFoxで動作を確認することができましたが、IE6でのみPNG部分が映らなくなってしまいました。
(PNGの部分ではなく、背景のJPEGだけしか見ることができません)

下記がソースになります。

<script type="text/javascript" src="png_js/iepngfix.js"></script>
<!--[if IE]>
<script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>
<style type="text/css">
.iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}
</style>
<![endif]-->

<div style="background-image:url(i/samp.gif); height:150px;">
<img src="i/top.png" width="780" height="150" border="0" class="iepngfix" />
</div>

参考サイトをコピーして使用したのですが、うまく動作しませんでした・・・。

すみませんが、どなたか教えていただけませんでしょうか。よろしくお願いいたします。

(ちなみにIEでの動作確認はIETesterというものを使用しております。)

投稿日時 - 2009-07-21 19:38:17

QNo.5144125

すぐに回答ほしいです

質問者が選んだベストアンサー

そのスクリプトは、「PNG画像の背景」を表示するものとみましたが
あなたは、PNG部分が映らなくなってしまいましたと書いていますね
<div style="background-image:url(i/samp.gif); height:150px;">
<img src="i/top.png" width="780" height="150" border="0" class="iepngfix" />
</div>
このソースを見ると背景ではなく、単にPNG画像を表示させているように見えますが、間違いないですか?

CSSでPNGを背景に指定してもIE6でも綺麗に表示されます!!
http://www.designwalker.com/2006/12/transparent-png2.html

透過PNGをIE6以下のバージョンで綺麗に表示するJavaScript
http://www.designwalker.com/2006/12/transparent-png.html

投稿日時 - 2009-07-21 21:59:22

お礼

ご回答が遅くなり申し訳ありませんでした。

教えていただいたURLを参考にまた挑戦したいと思います!

ご回答ありがとうございました。

投稿日時 - 2009-08-06 22:46:32

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

IE6は、PNGの透明をサポートしていませんのでPNGでなく透明GIFでやるしかないようです。

IE5はおそらく使用されていないと思います。
(Win-95はIE6が使えます)
**

投稿日時 - 2009-07-21 19:58:37

補足

ご回答が遅くなり申し訳ありませんでした。

結局、透明GIFでやりました・・・。お騒がせいたしました。

投稿日時 - 2009-08-06 22:44:19

あなたにオススメの質問