iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正

2023/08/09 23:27

このQ&Aのポイント

サイト内に透過PNGを使用したいが、IE6/7で表示が不正
iepngfix.jsで透過PNGを背景に設定したdivボックスは正常に表示されるが、imgタグで配置したリンクボタンが一部不正
IE6/7では透過部分のグレー表示が無く、iepngfix.jsが原因かどうか不明。問題解決するためには、iepngfix.jsのバグか乗り換えが必要か検討中

ベストアンサー

iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正

2010/07/10 23:10

iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正サイト内に透過PNGを何点か使用したく、かつIE6に対応する必要があるため、上記「iepngfix.js」を導入しました。 divボックスの背景に敷いたPNG画像は無事に透過されましたが、そのボックスの中にimgタグで配置したリンクボタンの表示が一部不正です。具体的には、IE6および7にて添付画像のような状態になります。8および他のブラウザは問題ないようです。マークアップ設定としては、divのcontentsボックスに透過PNGの背景を指定、その中にリストボタンを並べるためのcontents_headlistボックスを配置、その中にaタグでリンクを設定した透過PNGボタンを配置しています。関連部分のおおまかな設定は以下のとおりです。 body：全面にgif画像（透過なし）を敷き詰め .contents：幅と高さを指定、透過pngをno-repeatで配置、「behavior: expression(IEPNGFIX.fix(this));」「overflow:hidden;」を付加 .contents_headlist：contentsボックス内に配置、幅と高さを指定、左にフロート、パディング指定、「behavior: expression(IEPNGFIX.fix(this));」付加 .contents_headlist内に設置したimg：幅と高さを指定、alt属性指定、リンク付加、「style="behavior: expression(IEPNGFIX.fix(this));」付加 IE6の表示でも、透過部分のグレー表示が見られないので透過自体はされていると思います。できればiepngfix.jsを使用したままなんとかしたいのですが、iepngfix.js自体のバグか何かならば乗り換えもやむなしと考えています。不明点等あれば追記しますので、よろしくお願いいたします。

honeybear9
お礼率66% (10/15)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

株式会社 Webの間（@webnoma）
ベストアンサー率66% (8/12)

2010/07/12 17:24 回答No.1

こちらではないでしょうか。 http://terakoyan.x0.com/?p=86 ここにあるように透過GIFをご自身のサーバーに用意する方が確実ですよ。

参考URL：: http://terakoyan.x0.com/?p=86

質問者

お礼 2010/07/18 22:10

ご連絡が遅くなりすみません。その節はありがとうございました。そろそろIE6は考慮するブラウザから外したいですね・・・

質問者

補足 2010/07/13 02:52

ありがとうございます！　まさにこれじゃないかと思います。配布元のサーバーのせいとは思いませんでした・・・今は素材が手元にないので、挙動は明日確認してみますが、ひとまずお礼を。ありがとうございました。

関連するQ&A

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>  <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というものを使用しております。）
- ベストアンサー
- HTML
CSS Validatorでのエラー
すみませんがよろしくお願いします。最近1つサイトを制作しまして、背景、画像等に透過のPNGを使用して、ie6以前のものでも表示できるように、いろいろな方法の中、 http://blog.l-xs.com/yungsang/2006/12/png_alpha_filter_ie7.html 元 ”韓流”プログラマ、ユンサンのサイトを参考にさせてもらい、 iepngfixを使用して表示されるようにはなったんですが、 CSS Validatorのチェックをすると、これを使用した部分で「文法解析エラーが発生しました IEPNGFIX.fix(this))」となります。利用方法としては、下記のようにクラス指定し背景でPNGを使用するところでdivに適用、その他PNGを使う画像のところで#ID img{behavior: expression(IEPNGFIX.fix(this));}で適用させて使用している感じです。 <script src="iepngfix.js" charset="utf-8" type="text/javascript"></script> <style type="text/css"> * html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); } </style> web上でいろいろ検索はしてみたんですが、よく分かる回答もなくどこをどう直せばエラーが消えるのかでかなりつまづいております。。。ぜひともよろしくお願いします!
- ベストアンサー
- HTML
透過PNGをIE6に適用させたい
透過PNGをIE6に適応するため、DD_delatedPNGというjavascriptを使おうと思ってコーディングしたのですが、うまく透過されません。コードは  と<head>の中に書きました。「#header_box_r li」というidに指定した背景画像にjavascriptを適用させIE6でも背景画像を透過させたいのです。この他にも必要なコードがあるのでしょうか？IETesterで試すと、「DD_belatedが適用されていません。」とでます。コードを間違って記入しているのでしょうか？どなたか、教えてください。
- ベストアンサー
- JavaScript
透過pngとie6について
ウェブの職業訓練に通っております。現在課題製作中で、透過pngもしくはcssのアルファ？記述で画像を透明にしようと思っています。色々調べて、透過pngにさらに opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; というcss記述を加えてあります。また、unitpngfix.jsへのリンクも貼りました。自分のパソコン（mac,safari）ではどちらもきいていて、透過pngの画像がさらに薄く表示されています。彼のパソコン（win,IE6.6）で見たところ、どちらかがきいていません。が、透過はされています。（不透明にはなっていないです。）結果的には、どっちかがきけばOKなのですが、この状態で大丈夫でしょうか？全てのブラウザに対応出来ますか？よろしくお願い致します。
- 締切済み
- CSS
テーブル背景のpng画像を透過したい
テーブルの背景に透過部分を含んだpng画像を設定して、その上に文字を載せたいと考えています。簡略化した現在のタグは以下です。　<table> 　 <tr> 　　<td background="（png画像URL）"> 　　　ここに文字　　</td> 　 </tr> 　</table> 通常だとこれで良いのですが、このpng画像は透過部分を含んでいます。（ちなみにpng-24です） WindowsのIE7.0だと正常に透過されるのですが、IE6.0や他のブラウザですと透過部分が青白く浮かび上がってしまいます。私はIE6.0でも透過されるように表示させたいのです。欲を言うと、MacのSafariでも透過させたいです。一方、テーブルの背景に設定していない、普通の画像ですと<img src="">タグを使っているのでCSSを利用して、＜スタイルシート指定部分＞ .ail { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .ail img { visibility: expression("hidden"); } ＜／スタイルシート指定部分＞＜画像部分＞　<span class="ail"> 　<img src="（png画像URL）"> 　</span> ＜／画像部分＞で透過しているのですが、テーブルの背景に指定した画像では、このタグは使えません。他にも色々な方法を検索したのですが有効なものが見つからず、、、そもそも、テーブルの背景に指定したpng画像は透過できないものなんでしょうか…？というところまで考えてしまいます。もし方法があれば教えて欲しいですが、HTMLで実現不可能な範囲なのならばそれも指摘して欲しいです。この部分だけクリアできれば、Webサイトも完成します。切実に宜しくお願いします。
- 締切済み
- HTML
透過PNGをIE6へ、かつYoutubeの動画
IE6で透過PNGを使わなければならず、alphafilter.jsにしようかと思っていました。 http://blog.webcreativepark.net/2007/02/01-233315.html しかしこのjsを読み込むとYoutubeの動画を貼り付けた時に、IE6でページ内にあるリンク(テキストリンク)をクリックできないという状況に陥りました。透過PNGは<img>タグで、及びCSSの背景で使用しています。何か良い対策がありましたら教えていただけますでしょうか。
- ベストアンサー
- JavaScript
IE6のPNG透過
こんばんはどなたかわかりましたら押してください。現在pngの透過をIE6で見れるよう試行錯誤してるのですが、どうも上手くいきません。只今こんな感じです。以下CSS==================== #navi_layer { width: 100%; height: 50px; margin: 0px 0px 10px 0px; padding: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='絶対パス指定.png',sizingMethod='crop'); background-image: url(絶対パス指定.png); background-repeat: repeat-x; } 以上CSS==================== このnavi_layerの背景を透過させて、その上にイメージを載せようと思っています。現段階では透過テストだけしているので、イメージはまだ載せていません。その状態で透けてくれない状態です。使用している保存形態はPNG-24です。 IE7やFirefoxでは透過を確認できています。なのでいけるかと思ったんですが… どなたか教えてください＞＜宜しくお願いします。
- ベストアンサー
- HTML
IE6で透過pngを表示させる方法
いつもお世話になっています。マウスオーバーで画像Aの上に画像Bが表示されるというjavascriptを作りました。画像BはAに重なるので、 http://allabout.co.jp/internet/hpcreate/closeup/CU20040510A/ で教えてもらったposition: relative;、position: absolute;のCSSを使って配置し、javascriptでマウスオーバー・アウトさせています。無事うまくいったのですが、Bが透過pngなので、IE6で表示が乱れます。そこでこちらで似たような質問を検索し、http://www.koikikukan.com/archives/2007/08/14-015513.php のpngfix.jsを使うのだと知りました。早速ダウンロードし、htmlのheadに  を書き、htmlと同じ階層にpngfix.jsをアップロードしましたが、全然ダメでした。何を間違ってるんでしょうか？自分でもしや？と思うことは・position: relative;、position: absolute;　を使っている・画像Aの上にBがマウスオーバー・アウトするjavascriptは外部ファイルにしている・IE6のスタンドアローン版でチェックした(ただこれは正規のIE6を使用している人に見てもらってやはり透過していないと確認済です) 以上です。制作環境はWinXP、Dreamweaver8です。このpngfix.jsを使用する方法がダメだったらjavascriptで作っている部分をFLASHで作り直すしかないと思っていますが、透過pngはFLASHであればIE6でも表示されるのでしょうか？長くなりましたが、お知恵をお貸りできれば助かります！知識がなくすみません…。
- ベストアンサー
- CSS
IE8でのフェードする要素のpng画像透過
こんにちは。 jQueryでわからないことが出てきましたので質問させていただきます。 JavaScriptにもさほど詳しいわけでもないので、分からずに困っております。添付の図を見ていただいくとおそらく状況がわかるとは思うのですが、グローバルメニューにオンマウスでメガメニューを表示させたいと思っております。メガメニューの背景は透過pngで下のコンテンツ部分がうっすら見えるようにしたいと思っております。しかしIE8で見ると、メガメニュー部分の透過が効いておらずにグレーに表示されます。また、透過pngにしている画像の周りに黒い線が表示されてしまいます。 png透過のjsは以下のサイト様から拝借しております。 http://wakuworks.jugem.jp/?eid=153 また、メガメニューは以下のサイト様から案を拝借しております。 http://www.skuare.net/2009/11/jquerycssvia_mega_drop_down_me.html png透過のjsを拝借したサイト様ではinput type="button"でのフェードアウト/フェードインはできているようなので、それを応用しようとしました。しかし私の少なすぎるjsの知識では改造することも難しく時間がかかってしまっています。仕事の案件で使用しているため、時間があまりなく急いでいます。メガメニューを取りやめることもできませんので、どうしても実装しなければなりません。皆様のお力をお貸しいただければ、とても助かります。どうぞよろしくお願いいたします。
- 締切済み
- JavaScript
IE6以前のバージョンでの透過png表示について
こんにちは。いくつか同じような質問が出ていますし、IE6以前は透過pngを読まない形式になっていることは知っています。そしていくつか表示させる方法も掲載されているのを見てはいるのですが、私の希望に合ったものが探せず困っています。私自身の環境はMacで、透過は読み込みます。またWindows機も所有していますが、XP proでIEではなくFireFoxを規定のブラウザにしており、透過は問題ありません。私が持っているブログにて、自作の小さな大小数個の画像（背景透過・本体70%透過）がランダムに上から降ってくるようなjavascriptを組んでいます。たまたまWindows2000のIE6で見てみたら、透過したはずの画像が全部枠付き、透過無しで、とてもダサくて。もちろん画像はうっとうしく、記事の文字も相当読みにくい状態でびっくりしてしまいました。これを解消する方法があれば教えていただきたいのです。お伝えすることとすれば、１．表示したいのはレンタルブログ上。（jsファイル等をアップロードってできるのかどうか不明）２．javascriptで読み込む画像データ（それぞれに大きさ属性指定できない）そんなもの消してしまえばいいじゃん、の一言も有りなのですが、対処法を知っておきたいと思いまして。簡単なHTMLはわかるレベルです。宜しくお願い致します。
- ベストアンサー
- HTML