- ベストアンサー
ボタンクリックによる画像の変更
はじめまして。 色々と調べたり考察してみたのですが方法が見つからないので質問致します。 □□□□ □□■□ ○ボタン □□□□ □、■＝画像ファイル 同一フレームの中に上図のように数個の画像ファイルが並べてあります。 その横にボタンを配置します。 そのボタンをクリックすることで■の画像ファイルをAからBに変更すること可能でしょうか？ また、可能であればその方法を教えて下さい。
- sakasama0rska
- お礼率44% (22/50)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
例えばこんなかんじでしょうか。 「ボタン1」で、name="img7"の画像が's.gif'に変わり、「ボタン2」で、初期値'7.gif'に戻ります。 <html> <head> <script type="text/javascript"> <!-- function setImg(name, src) { document.images[name].src = src; } // --> </script> </head> <body> <img name="img1" src="1.gif"> <img name="img2" src="2.gif"> <img name="img3" src="3.gif"> <img name="img4" src="4.gif"><br> <img name="img5" src="5.gif"> <img name="img6" src="6.gif"> <img name="img7" src="7.gif"> <img name="img8" src="8.gif"><br> <img name="img9" src="9.gif"> <img name="img0" src="0.gif"> <img name="imgc" src="c.gif"> <img name="imgd" src="d.gif"><br> <form action="#"> <input type="button" value="ボタン1" onclick="setImg('img7', 's.gif')"> <input type="button" value="ボタン2" onclick="setImg('img7', '7.gif')"> </form> </body> </html>
その他の回答 (1)
- go6n
- ベストアンサー率21% (3/14)
こんにちは。こんな方法でいかがですか？ まずそのページを「a.html」とします。 画像ＡをＢに変更したページを新しく作ります。「b.html」とします。 a.htmlの○ボタンに、b.htmlへリンクを貼ります。 つまり、その画像だけではなく、ページ全体を切り替えてしまう方法です。 HTMLだけで作るには、この方法しか思いつきませんでした。他の画像も変えるのであれば無理ですね・・・。
関連するQ&A
- ボタンクリックで画像を替えたい
はじめまして。 ホームページを作成しているのですが、解決できない問題があり 皆様方のお知恵を拝借したく投稿させていただきました。 どうかお力添えをいただけますと幸いです。 具体的な内容としまして、 大きな画像（400px×125px）の下に横並びでボタン（80px×25px）を5つ配置しているのですが そのボタンをクリックすると大きな画像部分がクリックしたボタンに あわせて入れ替わって表示されるようにしたいのです。 ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが 今ひとつ方法がわからずに苦しんでいます。。 これをFLASHをつかわず作成したいと考えています。 説明不足、言葉足らずなどあるかとは思いますが どなたかお力添えをいただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- ボタンクリックでボタン画像を変えて、更に横に画像を
最近ブログを始めて、html、cssを勉強しているのですが、分からないことがあるので質問させて頂きます。 私が作りたいのはボタン画像を縦にいくつか並べて、クリックするとその横に画像が表示され、ボタンも押した状態（画像が変わっている）になっているというものです。 また、cssとhtmlでないのでしたらサイトへのアップや記載方法なども教えていただきたいです。 もしお分かりの方がいましたら、よろしくお願いします。
- ベストアンサー
- CSS
- コマンドボタンのクリックによるフレーム表示切り替え
Visual Basic 6 に関する質問です。 コマンドボタンをクリックする度に、 画面に配置したフレームの表示／非表示を 切り替える方法を教えていただけないでしょうか？ 初歩的な質問で申し訳ございませんが、 よろしくお願いいたします。
- ベストアンサー
- Visual Basic
- オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。
オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン（１～４）があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。
- ベストアンサー
- ホームページ作成ソフト
- 画像で作成したボタンの処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cを一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)画像Aがクリックされたら、画像Aを画像A2に置き換える (2)画像A2が表示されている状態で、画像Bをクリックすると、画像A2は画像Aとなり、画像Bは画像B2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみ画像A2となり、カーソルが離れると画像Aに戻ってしまうが、クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でif文でできるような気がするが、サンプルとなるものがなく、書き方がわからない…。 上記について、ご回答よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 画像がランダムに表示されるFLASH
いつもお世話になっています。 以下のようなFLASHを作りたいのですが、やり方がわからず困っています。 (1)リロードするたびにランダムで切り替わる画像１～６がある (2)画像の横にボタン１～６があり、マウスオーバーするとそれぞれ画像１、画像２…と表示される (3)ボタン１～６をクリックするとwebページ１～６へジャンプ(リンクさせている) 上記目的のうち、(2)(3)については完成しています。具体的にはAフレームには画像1、Bフレームには画像2…と配置し、ボタン1～6のアクションスクリプトにそれぞれ「マウスオーバー時にAフレームに飛ぶ」と記述しています。そしてメインのタイムライン1フレーム目にはアクションスクリプトに「ボタン1がクリックされたらwebページ1へ、ボタン2がクリックされたらwebページ2へ…」と記述しています。 これで(2)(3)の目的は果たせており、問題は(1)です。 ランダム表示される画像があり、ボタンのマウスオーバーで指定した画像が表示され、クリックでwebページへとぶ、ためにはどこにどんな記述をすれば良いのでしょうか？ ちなみに作ったFLASHがサイトのトップページの一部となり、クリックで飛ぶwebページはそのサイト内です。 アドバイスいただけると助かります。 どうかよろしくお願いします。FLASHは上記がほぼ初めての挑戦である初心者です。
- ベストアンサー
- 画像・動画・音楽編集
- 画像クリックでラジオボタン選択
いくつかの画像と、それぞれの横にラジオボタンを表示しています。 今はラジオボタンをクリックしないと画像を選択したことになりませんが、画像をクリックするだけでラジオボタンがチェックされた状態にしたいと思っています。 教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- クリックして変更した画像を他の画像をクリックしたとき戻すには？
以前、別で下記のような質問がありました。 ●質問－－－－－－－－－－－－－－－－－－－ 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか？ どなたかご教授おねがいします。 －－－－－－－－－－－－－－－－－－－－－－ 上記の質問を受けての回答が下記のような感じで ●回答－－－－－－－－－－－－－－－－－－－ <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・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- 背景画像を切り換えるボタンのようなものを探しています
背景画像を切り換えるボタンのようなものを探しています 自分で調べてはみたのですが見つかるのは時間や曜日ごとに切り換えるものでボタンやリンクを使った背景画像の切り替えがなかったので質問させてもらいました A.jpgとB.jpgを同じ階層に配置してC.htmlというページでボタンやリンクなどを使って訪問者が切り換えられるようにしたいです 分かりにくくて申し訳ありませんがよろしくお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- クリックによる画像の入れ替え処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)Aがクリックされたら、AをA2に置き換える (2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。 クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でできるような気がするが、サンプルとなるものがなく、書き方がわからない。 （調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした） 上記について、ご回答よろしくお願いします。
- 締切済み
- JavaScript
お礼
素早い返答ありがとうございます。 この例ではjavascriptを使用していますよね？ 出来ればjavascriptを使用せずHTMLのみでやりたいと思っています。 HTMLのみでは不可能でしょうか？