• 締切済み

画像クリックで他の画像を入れ替える方法

ホームページ制作超初心者です。サイト制作で、画像「A」をクリックすると、画像「B」が画像「C」に入れ替わる。というアクションを設定したいのですが、ソースはどのように書けばいいのでしょうか。ご助言お願いします。

みんなの回答

  • gura_
  • ベストアンサー率44% (749/1683)
回答No.1
参考URL:
http://www.openspc2.org/reibun/javascript/mouse/012/index.html

関連するQ&A

  • クリックで画像が入れ替わるソースの書き方

    例えば、「1.jpg」という画像をクリックすると、「2.jpg」という画像が「3.jpg」という画像に切り替わるという設定にしたいのですが、そのアクションを実行させるソースの書き方を教えて下さい。若しくはそのようなアクションが設定されているサイトをご紹介下さい。よろしくお願いします。※使用ソフト:「ホームページビルダーver6」です。

  • 画像をクリックして他サイトに飛ぶ

    画像をクリックして他サイトに飛ぶ 正式な名称などは知らないのですが、amebaブログで画像をクリックすると他のサイトに飛びますが、あの事を何というのでしょうか? それと、そのHTMLソースを知っていれば教えてください。

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

    以前、別で下記のような質問がありました。 ●質問------------------- 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか? どなたかご教授おねがいします。 ---------------------- 上記の質問を受けての回答が下記のような感じで ●回答------------------- <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・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。

  • 画像を入れ替える方法

    ホームページで、画像をクリックしたら、その画像だけが入れ替わるようにしたいと思っています。 A.html というファイルの中に、b.jpg という画像があるとします。その画像をクリックしたら、c.jpg に入れ替わるようにしたいのですが、たとえば、直接、c.jpg にリンクすると、その画像だけが表示されてしまいます。かといって、新しくC.htmlというファイルを作って、その中にc.jpgを入れておくと、画面が変ってしまいます。 また、カーソルが触れると画像が入れ替わるようなことも出来るようですが、できればクリックして初めて画像が変るようにしたいのです。 iframe も考えましたが、画像の大きさが違うとうまくいかないと思いますし、もっとなにかいい方法があれば教えてください。

    • ベストアンサー
    • HTML
  • クリックで画像が入れ替わる設定

    初心者です。 まず用意したものとして、 (1)「1.jpg」~「8.jpg」(サイズ各500×500)の8枚の画像データ (2)「1a.jpg」~「8a.jpg」(サイズ各20×20)の8枚の画像データ (例)サイトの左側半分に「1.jpg」を1つ貼付け、右側半分には「1a.jpg」~「8a.jpg」の8つの画像を貼付けます。その状態で、例えば右側の「2a.jpg」をクリックすると、左側の「1.jpg」が「2.jpg」に切り替わり、右側の「3a.jpg」をクリックすると、左側が「3.jpg」に切り替わるというように、右側の「1a.jpg」~「8a.jpg」をそれぞれクリックすることによって、左側の画像を指定した画像「1.jpg」~「8.jpg」に切り替えたいのですが、どのような設定(ソース)にすればいいのでしょうか?そのような設定をしているサイトがあれば教えてください。お願いします。

  • ボタンクリックで画像を替えたい

    はじめまして。 ホームページを作成しているのですが、解決できない問題があり 皆様方のお知恵を拝借したく投稿させていただきました。 どうかお力添えをいただけますと幸いです。 具体的な内容としまして、 大きな画像(400px×125px)の下に横並びでボタン(80px×25px)を5つ配置しているのですが そのボタンをクリックすると大きな画像部分がクリックしたボタンに あわせて入れ替わって表示されるようにしたいのです。 ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが 今ひとつ方法がわからずに苦しんでいます。。 これをFLASHをつかわず作成したいと考えています。 説明不足、言葉足らずなどあるかとは思いますが どなたかお力添えをいただけませんでしょうか。 よろしくお願いいたします。

  • ホームページでの画像切り替えについて

    ホームページ初心者です。 メニューとなる画像を3つ(A~C)と画像Xが表示されている画面を開き、 メニュー画像がクリックされると画像Xが表示されている位置にメニュー画像に紐付いた画像を表示したい(Aがクリックされたら画像A、Bがクリックされたら画像Bといった感じ)です。 画像を切り替えるに瞬時に切り替わるのではなく、画像A・画像Bがゆっくり表示されるようなモノをつくりたいのですが、どのように実装したらいいのかわかりません。 どおなたか、ご教授 お願いいたします。

  • クリックすると小さい画像がキラキラする方法

    今ホームページを作っています。 今日ハイヒールモモコさんのHPで見かけたんですが、 クリックすると細かいハートの画像が数十個程散らばるようになっていました。 そんな風にしたいのですが、どうやったらいいのでしょうか? ちなみにモモコさんのHPアドレスは http://komomo.omosiro.com/index.html です。 分かる方がいらっしゃったらどうか教えてください。 出来ればソースを教えていただきたいのですが・・・ よろしくお願いします。

  • 画像をクリックしても開かない(見られない)のですが・・・

    初めまして。 インターネットやメールはよくしますが 技術的なことはよくわかっておりません。 どうぞよろしくお願いいたします。 あるショッピングサイトの商品を見ていて、 詳細画像のところをクリックしましても画像を開くことができません。(表示されません) 見ようとしていましたのは http://www.calendars.com/xq/asp/TID.{D90057B4-826E-4584-A34C-AE0730B2DC13}/PID.1/MGID.9884/IID.30135/qx/product.htm の click for other item views のところなのですが いくらクリックしても開けないのです。 関係があるのかどうかはわかりませんが クリックしようとしましたら下に javascript:MM_openBrWindow~とあります。 OSはウィンドウズXP IE6、SP2です。 セキュリティソフトはノートンです。 どうぞ宜しくお願いいたします。

  • クリックによる画像の入れ替え処理について

    HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)Aがクリックされたら、AをA2に置き換える (2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。  クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery?でできるような気がするが、サンプルとなるものがなく、書き方がわからない。  (調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした) 上記について、ご回答よろしくお願いします。

専門家に質問してみよう