• ベストアンサー

画像をクリックして入れ替えたい

画像の入れ替えが出来ずに困っています。教えて下さい。 3つの画像(1.gif)(2.gif)(3.gif)があります。 1.gifと2.gifは、ページを開いた時に、既に表示されるようにします。 2.gifの画像をクリックした時に、 1.gifの画像を3.gifの画像に入れ替えたいのですが、 どのようにすればよいでしょうか? お手数ですが、おわかりになられる方がいらっしゃいましたら どうぞ教えて下さい。 よろしくお願いいたします。

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

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.4

 <IMG>タグは、onClickなどのイベントに対応していないブラウザがほとんどなので、押す方の画像(2.gif)を<A>~</A>タグで囲み、onClickを受け取れるようにします。 <IMG src="1.gif" name="img1" border="0"> <A href="" onClick="images.img1.src = '3.gif'; return false;">  <IMG src="2.gif" border="0"> </A> ・<A>の機能でジャンプしないように、hrefの値をヌル(何も指定しない)にしておきます。 ・またクリック時のJavaScriptからもジャンプしないように、return false;としています。(return true;とすると、飛ぶ)

saruthi
質問者

お礼

できました!!! ありがとうございます。 すっごくうれしいです。 こんなに単純でよかったんですね。 いろいろ調べて、ものすごい記述いっぱい書いたりしてしまいました。 ホントに助かりました。 ありがとうございました。

その他の回答 (3)

  • makokoko
  • ベストアンサー率50% (7/14)
回答No.3

こんな感じっすかね。 <img src="1.gif" id="img1"> <img src="2.gif" id="img2" onclick="img1.src='3.gif'"> 未テストなので動かなかったらごめんネ!

saruthi
質問者

お礼

ありがとうございます。 イメージはそうです!! でも動きませんでした (><)

  • yuizuian
  • ベストアンサー率42% (103/245)
回答No.2

zohさんのアドバイスと、この参考URLのアドバイスを合わせて応用させればできると思いますよ。

参考URL:
http://www.okweb.ne.jp/kotaeru.php3?q=114348
saruthi
質問者

お礼

ありがとうございます。 でも、私にはちょっと難しくて・・・。

  • zoh
  • ベストアンサー率34% (273/789)
回答No.1

参考URLをご覧になって下さい。メニューの「イメージの変更」にサンプルがのっています。上にあるの「sample」ボタンで実際の動作を確かめられます。

参考URL:
http://www.cam.hi-ho.ne.jp/t-sue/js/main.htm
saruthi
質問者

お礼

ご回答ありがとうございます。 クリックして画像を変更する、という項目ですね。 この方法で、クリックした画像ではなく、別の場所にある画像を 切り替えたいのですが、 この場合は、どのようにしたらいいのでしょうか? ボタンの例など見ながらやってみたのですが、 うまくいきません。 お手数ですが、教えていただければ幸いです。 よろしくお願いいたします。

関連するQ&A

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

    前回質問したときに、解決したと思いましたが、動きがおかしいので 再質問します。 メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。 メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。 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対応希望。

  • JavaScriptでボタンをクリックすると画像が変わる設定をするには?

    たとえば、1.gif - 2.gif , 3.gif - 4.gif,5.gif - 6.gif,7.gif - 8.gif,9.gif - 10.gif の画像をついにしてボタンとして利用するとします。 最初に表示されるボタンは 1.gif , 3.gif ,5.gif , 7.gif , 9.gif の5つです。 JavaScriptで1.gifボタンをクリックしたら、2.gifボタンに画像が変わり、 3.gifボタンをクリックしたら、4.gifボタンに画像が変わるように(残りの画像も同様)したいと 考えています。この時、1.gif , 3.gif ,5.gif , 7.gif , 9.gifのいずれかのボタンがクリックされた 時点で、直前に変更していた 2.gif , 4.gif ,6.gif , 8.gif , 10.gifのいずれかのボタンは最初のボタン の状態に戻したいと考えています。 どのようにJavaScriptを記述すると可能なのでしょうか。 1つのボタンをクリックすると別の画像に変わる方法は色々なHPを参考に↓の記述でなんとかできたのですが、 複数のボタンになるとどのように修正していけばうまくいくのかわかりません。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- imgnum=1; function changeImage(){ if(imgnum==1){ document.myimg.src="2.gif"; imgnum=2; }else if(imgnum==2){ document.myimg.src="1.gif"; imgnum=1; } } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="javascript:changeImage()"><IMG src="1.gif" name="myimg" border=0></A> </CENTER> </BODY> </HTML> 質問がややこしくてすみません。 方法をお分かりの方はどなたか教えてください。よろしくお願いします。

  • 画像をクリックして同じページに拡大画像を出す

    小さい画像をクリックすると同じページに拡大画像が表示されるようにしたいのです。小さい画像が7つ程横に並んでいて、クリックするとその下に拡大画像が表示されるページです。フレームは使わないで出来ますか?フレームを使うとテーブルの背景が切れてしまうので使わないで作りたいのですがわかりません。教えてもらえたら嬉しいです。

    • ベストアンサー
    • HTML
  • 画像が切り替わる

    こんにちは。 この前とあるページで、ヘッダー部分に画像が表示されてるのですが その画像が時間で切り替わるようになっていました。(5枚くらい) 最初はGIFアニメかと思ったのですが、画像の下には番号が常に表示されていて 自分でクリックして好きな画像に自由に切り替えることが出来ます。 (ページを読み込み直しているわけではありません。とてもスムーズです) Flashかと思って画像そのものを右クリックしてみたら なんとJPGであることがわかりました。 これはどういう機能なのでしょうか? 私も画像の切り替えを出来るようにしてみたいです。 よろしくお願い致します。

  • クリックして変更した画像を他の画像をクリックしたとき戻すには?

    以前、別で下記のような質問がありました。 ●質問------------------- 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか? どなたかご教授おねがいします。 ---------------------- 上記の質問を受けての回答が下記のような感じで ●回答------------------- <script> function change(obj){ var orgimg="a.gif"; var newimg="b.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } } </script> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> ---------------------- これで終わってしまっていたのですが、画像が複数のパターンある場合はどのようにすればよいでしょうか。 例えば 「a1.gif」をクリックすると「a2.gif」に変更するようにして、さらに「b1.gif」というものがあって、クリックすると「b2.gif」に変更するように設定してあるとします。 「a1.gif」をクリックして「a2.gif」になっている状態で「b1.gif」をクリックすると「a2.gif」が「a1.gif」に戻るようにするにはどのようにすればよいでしょうか。 このb1が、c1,d1,e1・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。

  • ホームページで画像が表示されない

    質問内容 あるページで1つだけ画像が表示できない。 詳細 画像フォルダを「imageフォルダ」にaaa1.gif aaa2.gif aaa3.gif に入っています。 Webで表示できない画像を右クリックのプロバティでアドレスを確認するとhttp://www.aaa.ne.jp/~○○○/image/banner/aaa1.gif になってしまいページのソースを見ると <IMG src="../image/aaa1.gif" width="150" height="30" border="0"></TD>になっています。 ちなみに、他のページはaaa2.gif aaa3.gifは画像のプロバティで http://www.aaa.ne.jp/~○○○/image/aaa2.gif http://www.aaa.ne.jp/~○○○/image/aaa3.gif になっていて表示されます。                

  • 画像の表示について教えて下さい。

    画像の表示について教えて下さい。 Aページ(親)→Bページ(子)という構図のホームページがあった時に Aページで「テスト.GIF」という画像を表示すると Bページで同じ「テスト.GIF」を表示しても表示に時間が掛からないのでしょうか? 要はキャッシュか何かが残っていて画像の読込に時間が短縮出来るのか知りたいです。

    • ベストアンサー
    • HTML
  • 訪問済みリンク識別を画像で

    いつもお世話になります。 webでは、訪問済みのリンクが文字の色表示が変わることによって識別できますが、この識別を、画像をクリックして跳ぶタイプのリンクでも実現したいのですがJavascriptか何かで出来ないものでしょうか? よく、javascriptによって、ポインタを乗せると画像が別画像に入れ替わって、ポインタをどけると元の画像に戻るページがありますが、要は、「ポインタが乗ったことを検知して画像が変わる」のではなくて「このリンクがvlinkであるということを検知して画像が変わる」ように出来ないかと思ったのですが…。 例えば、 http://www.tk3.speed.co.jp/garten/patio/ (このサイトは私が作ったものではなく、あくまでも例です) の場合、左フレームの一番下のボタンをクリックしてリンクを右ウインドウに開き、次にまた別のページにジャンプした時、さっき訪問したリンクである一番下のボタンは赤いボタンにでも変わって、このリンクは既に訪問済みであることが分かるようにしたいのです。 つまり、 ボタン1:未訪問の場合btn1.gifを表示→訪問後はbtn1_v.gifを表示 ボタン2:未訪問の場合btn2.gifを表示→訪問後はbtn2_v.gifを表示 ボタン3:未訪問の場合btn3.gifを表示→訪問後はbtn3_v.gifを表示 と言った具合に、仮にボタンが3つなら6枚の画像を用意するわけです。 尚、私は、前述の「マウスONで画像入れ替え」のスクリプトさえ自分の力でプログラムできないもので、恐れ入りますが、javascriptで実現が可能でしたら、部分的でなく具体的なソースを教えて頂けるとありがたいのですが…。 javascript使用以外の方法でも何でも構いませんので、この目的を達成する方法をご存知の方がいらっしゃいましたらご伝授いただけませんでしょうか?

  • クリックで画像表示、さらに画像の一部をクリックで閉じる

    今、Javascriptを使用したページを立ち上げようと しており、以下のようなことをしたいと思っています。 (1) あるテキスト(または画像)をクリック (2) 説明用の画像が表示 (3) (2)で出た画像内の×マークをクリックすると、   その画像が消える。 イメージとしては、GOOGLEローカルのように、 マーカーをクリックすると、 説明文(画像)が出てきて、 ×を押すと閉じるといった内容です。 Javascriptのonclickとかをうまく使えば…と思うのですが、 ホントに初心者なので、分からないことだらけです。 すいませんが、教えていただけないでしょうか。

  • 画像の入れ替え

    簡単なショッピングサイトを作成しています。 色々な色を取り揃えている商品があるのですが、 ページの中央に1枚大きく画像を表示してその下に他の色(約20色)の画像を小さく表示しています。 下の小さい画像をクリックすると中央の大きい画像がクリックされた色にかわるようにしたいです。 色々なサイトを検索してもクリックしたその画像を入れ替える方法は書いてあってもまったく別の画像の入れ替えの方法が見つかりません。 試行錯誤で色々試しているのですが中央の画像が変わらず他の場所にある画像がかわったりとなかなか上手くいきません。 どなかた書き方ご存知の方教えてください。 よろしくお願いします。