IE6でクリックできない問題について

前へ 次へ
このQ&Aのポイント
  • IE PNG Fix を使用した半透明画像がIE6でクリックできない問題について解説します。
  • <ul>タグにCSSでPNG画像を指定する方法について解説します。
  • IE6以外のブラウザでは正常に動作するが、IE6ではクリックできない問題について解決策を探しています。
回答を見る
  • ベストアンサー

IE PNG Fix を使用　IE6でクリックできない

http://www.designwalker.com/2006/12/transparent-png2.html こちらのページで紹介されてある iepngfix というJavascriptを使用させていただきました。 見事、半透明の画像がキレイに表示できたのですが・・・ IE６だけリンクをクリックすることができません。 使い方は <ul>タグにCSSでPNG画像を指定して <li>に<a>タグを使用しております。 IE6以外だと普通にクリックできるのですが IE6はクリックすることができません。 いろいろ調べてみたのですが、よくわかりません。 どなたか解決策をご存知のかた、教えていただけたら幸いです。 どうぞ、よろしくお願いいたします。

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

  • ベストアンサー
  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.1

半透明化処理を行うと、中のリンクが押せなくなるケースがあるらしいです。positionを設定してる場合とか。 この問題に対応しているライブラリがないと厄介です。alphafilter.jsなら行けるかなぁ？ http://blog.webcreativepark.net/2007/02/01-233315.html

その他の回答 (1)

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.2

追記。IE PNG Fixではなくalphafilter.jsを使ってみてはいかが…という意味です。

tama-2009
質問者

お礼

お礼が遅くなり申し訳ございません。 alphafilter.jsを使ってみたのですが だめでした。 サイドメニューをポップアップメニューにしているので <li>を入れ子にした形になっています。 サイドメニューをオンマウスで表示させたポップアップメニューのバックにPNG画像を使用したいのですが、いろんなJSをためしてみましたが、どれもだめでした。 PNGをあきらめようと思います。 ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連する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> <!--[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というものを使用しております。）

    • ベストアンサー
    • HTML
  • iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正

    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自体のバグか何かならば乗り換えもやむなしと考えています。 不明点等あれば追記しますので、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 透過pngを表示するスクリプトとロールオーバー

    トップページのタイトル画像を透過させてロールオーバーさせたいです。 --- 透過pngを使いたかったのですが、使用しているブラウザに対応していなかったので、どうにか表示させる方法を探していました。 そしてたどり着いたのは（http://www.designwalker.com/2006/12/transparent-png.html）のサイトのスクリプトなのですが、画像をロールオーバーさせるJavaScriptには対応していないのでしょうか。 <A href="t_off.png"><img src="t_off.png" onMouseOver="this .src='t_on.png'"onMouseOut="this .src='t_off.png'"></A> ↑これです/ロールオーバーに使用しているタグ CSSでのロールオーバーも考えた（挑戦した）のですが、タイトル画像で大きさを掴みにくく、中々上手く指定が出来ません。 CSSではリンクに触れた際に背景の画像をずらすことになると思うのですが、同じサイトの透過pngを背景画像で使うスクリプトでは、大きさを指定しなくてはならず、上手に出来ませんでした。 （そのスクリプトなしでは成功しました） --- 一つのサイトのプログラムのことなので、ここで質問すべきではないのかも知れませんが、あちらでは場違いになりそうなので、ここに書かせて頂きました。 カテゴリもまたがっているので、もしも問題がありましたら、ごめんなさい。 よろしければ、ご回答お願いします。 --- 使用ブラウザ:Sleipnir 1.66 画像編集ソフト:Adobe Photoshop Elements 5.0

  • 透過PNGをIE6へ、かつYoutubeの動画

    IE6で透過PNGを使わなければならず、alphafilter.jsにしようかと思っていました。 http://blog.webcreativepark.net/2007/02/01-233315.html しかしこのjsを読み込むとYoutubeの動画を貼り付けた時に、IE6でページ内にあるリンク(テキストリンク)をクリックできないという状況に陥りました。透過PNGは<img>タグで、及びCSSの背景で使用しています。 何か良い対策がありましたら教えていただけますでしょうか。

  • IE6で透過PNGを正常に表示したい。

    はじめまして。 PNGを使用してドロップシャドウのついたボタンを挿入しようと考えています。 色々調べました、無反応だったり、ドロップシャドウ部分だけでなくボタンそのものが表示されなくなったりとうまくいきませんでした。 http://www.designwalker.com/2006/12/transparent-png.html http://wp.takuhitosotome.com/?s=pngfix http://www.stylish-style.com/csstec/hi-level/a-png.html ↑ 最後のやつはすべて表示されませんでした・・・あとの2つは無反応です。 head部分は以下のように記述しています。 <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> </head> おそらく真ん中のを試した状態だと思います・・・ でファイルダウンロードしてアップロードしたんですが、ダメでした。。。 どうか解決方法を教えてください！

  • リストを横並びにするとマーカーが消える（IE）

    cssデザインをしているのですが、<ul><li></li></ul>タグで箇条書きを使っています。これをfloatで横並びにさせたのですが、IEで見たとき横に表示されるべきマーカーが消えてしまいます。これの対処法を教えていただけませんでしょうか？画像で置き換え以外の方法でお願いします。

  • javascriptで、クリックしたらメニューが閉じるようにしたいです

    javascriptで、クリックしたらメニューが閉じるようにしたいです。 one two three ... と 横並びのメニューがあってそこをクリックするとプルダウンでメニューが 出てくるようなものをJavaScriptで作っています。 そこで、その横並びのメニュー・プルダウンで出てきたメニュー以外のところをクリックすると、 メニューが閉じるようにしたいと思っています。 どうやったらそのようにできるでしょうか。 ちなみにhtml, cssの概要は以下のとおりです(one, twoのプルダウンは省略) //html----------- <ul id="menu"> <li>one</li> <li>two</li> <li> three <ul> <li>a</li> <li>b</li> <li>c</li> </ul> </li> </ul> //css---------- #menu li ul{ display: none }

  • 透過PNGをIE6に適用させたい

    透過PNGをIE6に適応するため、DD_delatedPNGというjavascriptを使おうと思ってコーディングしたのですが、うまく透過されません。 コードは <!--[if lte IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script> <script type="text/javascript"> DD_belatedPNG.fix('#header_box_r li'); </script> <![endif]--> と<head>の中に書きました。「#header_box_r li」というidに指定した背景画像にjavascriptを適用させIE6でも背景画像を透過させたいのです。 この他にも必要なコードがあるのでしょうか？IETesterで試すと、「DD_belatedが適用されていません。」とでます。コードを間違って記入しているのでしょうか？ どなたか、教えてください。

  • IEでPNG画像が黒く縁取りされてしまいます。

    私のサイトにスムーズスクロールで矢印画像をを設置しております。 背景は透明のpng画像（矢印）です。 添付の画像を参照していただきたいのですが、 chromeやFirefox、IE９では、矢印画像はそのまま正常に表示されます。 しかし、IE８（多分IE７でも）で確認すると、矢印が黒く縁どられて 表示されてしまっております。 CSSに下記の記述をしましたが、解決いたしませんでした。 border: 0px; border-style:none; background-color:transparent; 画像自体が四角くふちどられるわけではなく、 なぜ矢印が縁どられるのか原因がわかりません。 IEで縁どられず、そのまま表示させる方法を教えて頂けませんでしょうか。 どうぞ、よろしくお願いします。

    • ベストアンサー
    • 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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する