• 締切済み

クリックした自身の画像を別画像に入れ替えて表示

前回質問したときに、解決したと思いましたが、動きがおかしいので 再質問します。 メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。 メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。 onClick時に自分自身の画像を入れ替えし、リンク先が表示されるまで入れ替えた画像を表示したいのです。 下記のコードだと、クリック時、a_press.gif'は表示されず 何も表示されていない状態(背景画像)が見えてしまいます。 a_press.gif'<a href="http://www.yahoo.com/"> <img src="images/a_on.gif" onmouseover="this.src='images/a_rollover.gif';" onmouseout="this.src='images/a_on.gif';" onclick="this.src='images/a_press.gif'; this.onmouseover=null; this.onmouseout=null;"> </a> どなたかご教示いただけないでしょうか? よろしくお願いします。 IE,Firefox対応希望。

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

単に;のタイポじゃなかろうか。 <div> <a href="http://www.yahoo.com/"> <img src="images/a_on.gif"  onmouseover="this.src='images/a_rollover.gif';"  onmouseout="this.src='images/a_on.gif';"  onclick="this.src='images/a_press.gif';       this.onmouseover=null;       this.onmouseout=null;"> </a> </div>

関連するQ&A

  • onclickで自分自身の画像を変更する

    メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。 メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。 onClick時に自分自身の画像を入れ替えし、リンク先が表示されるまで入れ替えた画像を表示したいのです。 過去トピックで確認したのですが、回答のリンクが切れてしまっていて、確認できませんでした。 1日以上試行錯誤していますが、どうにもうまくいきません。 どなたかご教示いただけないでしょうか? よろしくお願いします。 IE,Firefox対応希望。 下記コードが現在のところです。 <li><a href="http://www.yahoo.com/" onmouseover="document.spp.src='images/a_rollover.gif'" onclick="document.spp.src='images/a_press.gif'" onmouseout="document.spp.src='images/a_on.gif'"> <img src="images/a_on.gif" name="spp"></a></li>

  • オンマウスで画像を変えたい。

    オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像1URl" onmouseover="this.src='画像2URl';" onmouseout="this.src='画像1URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像 表示について質問です。

    画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。

    • ベストアンサー
    • PHP
  • ボタンをクリックした感じの画像を設定する

    htmlページに、作成した画像を配置し、リンクを貼っています。 画像の上にカーソルを合わせたときに画像を変えることはできたのですが、 クリックしたときに画像を変える方法が分かりません。 クリックしたときに押した感じを表現したいです。 どのようにコードを書けばいいですか? ご教授お願いいたします! ちなみにオンマウス時に画像を変化させるため以下のようなコードを書いています。 <img src="./images/logo.jpg" onmouseover="this.src='./images/logo_on.jpg'" onmouseout="this.src='./images/logo.jpg'" alt="お問い合せはこちら" /></a> よろしくお願いいたします!

    • ベストアンサー
    • HTML
  • 画像クリックにて自分自身を別画像に入れ替えるには?

    ホームページを作成中なのですが、メニュー欄をそれぞれ画像にて表示し、画像クリックにて対象ページに飛ぶようにしております。 このたび、選択されたメニューを識別できるように、クリックされた画像を別画像に入れ替えて表示させようとしています。 onMouseOverやonMouseOut時に一時的に画像を入れ替えるロールオーバーのサンプルはよく見かけますが、できればロールオーバー的なものではなく、onClick時に自分自身の画像を入れ替えし、別の画像がクリックされるまで、ずっと入れ替えた画像を表示しておきたいのです。 JavaScript、CSSなど方法は問いません。 なお、テキストエディタにて作成しています。 どなたかよきアドバイスをお願いいたします。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 外部ファイルの記述の仕方

    HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか? <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>

  • ロールオーバーが表示されない

    ココログでブログを作成しています。 パソコン知識は低いですが、簡単なタグを親切に教えてくれるサイトを参考にがんばってカスタマイズしています。 以下の通りでロールオーバーが簡単にできるとのことでやってみましたがうまくいきません。 【参考にしたタグ】 <img src="★" border="0" onmouseover="this.src='●'" onmouseout="this.src='■'"> ★最初に表示される画像のファイル ●オンマウスで表示される画像のファイル ■マウスをはずしたとき表示される画像のファイル 【私が入力したタグ(??のところにココログのアドレスが入ります】 <IMG src="http://??.cocolog-nifty.com/images/★のファイル.gif" onmouseover="this.src='http://??.cocolog-nifty.com/images/●のファイル.gif'" onmouseout="this.src='http://??.cocolog-nifty.com/m/images/■のファイル.gif'"> 【トラブルの現象】 1)1枚だけ表示されマウスを持っていくと×印になり二度と表示されません。 2)HTMLの編集欄にタグを貼り付け保存→記事の作成で確認→htmlの編集欄に戻ると、タグの順番が逆になる(↓このようになる) <p><img onmouseover="this.src='●'" onmouseout="this.src='■'" src="★" border="0" /></p> うまく表示する方法がございましたら教えて頂けると助かります。 尚、他のサイトのロールオーバーは表示されております。

  • 画像が変わりません;教えて下さい!

    質問させて頂きます。 お知恵をお貸し下さい。 ウェブサイトを作っていて、 「画像にオンマウスで別の画像を表示、クリックでリンク先に飛ぶ」 というのをやりたかったのです。 しかし、画像1は表示され、リンク先にも飛ぶのですが、 オンマウスしても画像2が表示されません; 何が原因でしょうか? 以下のようにしているのですが… <a href="リンク先のURL"> <img src="img/画像1.gif" onmouseover="this.src='img/画像2.gif'; " onmouseout="this.src='img/画像1.gif';" border="0"> </a> 初心者なものですみません。 カテゴリ選択もここで良いのでしょうか…; ご存知の方、どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 画像をクリックして別の画像を変えたい

    ボタン画像をクリックしたときに同一ページ内にある画像が変わるようにしたいのですが、下のように描くと、ボタン画像(button.gif)自身が2.pngなどの画像に変わってしまいます。   <HTML> <HEAD> <TITLE>スワップイメージ</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function changeImage(imageUrl){ document.images[0].src = imageUrl; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" onClick="changeImage('1.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(2.png')" ><IMG SRC="button.gif" border="0"></A> <A HREF="#" onClick="changeImage(3.png')" ><IMG SRC="button.gif" border="0"></A> <TABLE BORDER="0"> <TR> <TD>ボタンを押すと下に画像が表示されます。</TD> </TR> <TR> <TD><IMG SRC="1.png"></TD> </TR> </TABLE> </BODY> </HTML> 原因を私なりに考えたところ、設定した変数mageUrlをボタンを表示させるために使った<img src="button.gif">で受け取ってしまっているというのはわかりました。(確認のため <IMG SRC="1.png"> を<A HREF>~</A>より上に持ってきたら思っていた動きになりました。)  けれどそれからどう修正したらもとの順番でもちゃんと動くのかがわかりません。過去ログの似た質問も拝見したのですが、今の自分では理解できませんでした‥。すみませんがよろしくお願いいたします。

  • 離れた場所にマウスオーバーで画像を変えたい。

    宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。 配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。 ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。 <div id="container">ここに画像を表示させたいです!</div> <div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div> <div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div> <div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div> どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。 どうぞ、宜しくお願いいたします。m(_ _)m

    • ベストアンサー
    • CSS

専門家に質問してみよう