- ベストアンサー
ボタンクリック時にボタンの状態を切り替える
AとBというボタン(画像)があります。それぞれのボタンは通常の状態とアクティブ状態の2つの画像があり AとBで計4つのボタンがあります。 初めの状態はAのボタンがアクティブ状態でAの内容がページ内のしかるべき場所に表示されています。 Bのボタンをクリックした際にはBのボタンがアクティブ状態になりAのボタンは通常状態に戻り Bの内容がinnerhtmlを使用してAの内容が表示されている場所にBの内容が表示されるというような感じにしたいのですが innerhtmlを使用してAとBの内容の切り替えはできたのですがAとBのボタンの状態の切り替え方がうまくできないのです。 どなたかサンプルをご提示していただきアドバイスいただけると助かります。 ちなみに今回はボタン2つで説明させていただきましたが 将来的にはボタンは10個位になる予定です。
- champl
- お礼率62% (20/32)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <body> <div id="btn"> <img src="kin.jpg" width="620" height="50" alt="kin.jpg" id="t0"> <img src="gin.jpg" width="620" height="50" alt="gin.jpg" id="t1"> <img src="dou.jpg" width="620" height="50" alt="dou.jpg" id="t2"> </div> <div id="txt"></div> <script type="text/javascript"> //@cc_on //全角空白は適当に変換のこと /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function(){ var t = document.getElementById('btn'); var d = document.getElementById('txt'); var i = t.getElementsByTagName('img'); var r0 = /\.jpg$/; var r1 = /_r\.jpg$/; var text = { 't0':'これは１個目の画像のコメントです。', 't1':'これは２個目の画像のコメントです。', 't2':'これは３個目の画像のコメントです。' } d.innerHTML = text.t0; t./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var e = evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/; var c = 0; var o; if('IMG' == e.tagName) { while (o = i[c++]) { o.src = o == e ? o.src.match(r1) ? o.src: o.src.replace(r0,'_r.jpg'): o.src.replace(r1, '.jpg'); o.alt = o.src;//確認用 } d.innerHTML = text[e.id]; } }, false); }, false); </script>
その他の回答 (1)
- SortaNerd_
- ベストアンサー率59% (309/522)
面白そうだったので書いてみました。 自由度は高くしたつもりなので適に書き換えて使ってください。 <span id="buttonFoo"><img src="activebuttonFoo.png" onClick="activate('Foo')"></span> <span id="buttonBar"><img src="inactivebuttonBar.png" onClick="activate('Bar')"></span> <span id="buttonHoge"><img src="inactivebuttonHoge.png" onClick="activate('Hoge')"></span> <script> buttons=["Foo","Bar","Hoge"] function activate(which){ /**/ document.getElementById("button"+which).innerHTML=buttonhtml(which,true); /**/ for(i=0;i<buttons.length;i++){ /**/ /**/ if(buttons[i]!=which){ /**/ /**/ /**/ deactivate(buttons[i]); /**/ /**/ } /**/ } } function deactivate(which){ /**/ document.getElementById("button"+which).innerHTML=buttonhtml(which,false); } function buttonhtml(which,isactive){ /**/ if(isactive) /**/ /**/ return "<img src=\"activebutton"+which+".png\" onClick=\"activate('"+which+"')\">"; /**/ else /**/ /**/ return "<img src=\"inactivebutton"+which+".png\" onClick=\"activate('"+which+"')\">"; } </script>
関連するQ&A
- ボタンクリックで画像を替えたい
はじめまして。 ホームページを作成しているのですが、解決できない問題があり 皆様方のお知恵を拝借したく投稿させていただきました。 どうかお力添えをいただけますと幸いです。 具体的な内容としまして、 大きな画像（400px×125px）の下に横並びでボタン（80px×25px）を5つ配置しているのですが そのボタンをクリックすると大きな画像部分がクリックしたボタンに あわせて入れ替わって表示されるようにしたいのです。 ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが 今ひとつ方法がわからずに苦しんでいます。。 これをFLASHをつかわず作成したいと考えています。 説明不足、言葉足らずなどあるかとは思いますが どなたかお力添えをいただけませんでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- インラインフレームにボタンクリックで表示させたいです。
こんにちは。いつもお世話になっております。 <body>タグの中に <a href="javaScript:chaneIFrame('URL')">飛ぶ</a> として、インラインフレーム表示させる事はでできました。 これを、文字クリックではなくて、ボタンクリックで 表示させるようにする方法はありませんでしょうか？ 検索してみたのですが、サンプルはどこも文字クリック になっていて、ボタンでのインラインフレーム切り替え がなくって・・・・。 どうかご指導よろしくお願いいたします。
- ベストアンサー
- JavaScript
- innerHTMLを使わずに…
初めまして。 よく、リンクに触れると、下に説明文が表示される…というようなサイトがありますよね。 それの応用で、innerHTMLを使わずに以下のような物を作りたいのですが、お力を貸してくださいm(_ _)m ボタンAとボタンBがあって、ボタンAをクリックすると画像Aを表示。 ボタンBをクリックすると画像Aから画像Bに表示が切り替わる。 その表示した画像に個別のリンクを貼る。 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ａアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクＡ><IMG src=画像Ａアドレス></a>'">ボタンＡ</A></td> <td rowspan="2"><font id="img"></font></td> </tr> <tr> <td><A onMouseOver="img.innerHTML='<a href=ＵＲＬ><IMG src=画像Ｂアドレス></a>'" onMouseOut="text.innerHTML='<a href=リンクＢ><IMG src=画像Ｂアドレス></a>'">ボタンＢ</A></td> </tr> </table> という物を作りたいのですが、innerHTMLは対応していないブラウザが多いので、使用したくないのです。 JavaScript、CSSはOKです！ よろしくおねがいします。
- ベストアンサー
- HTML
- クリックの回数で違う場所の表示を変えたいんです。
例えば、ＮＥＸＴボタンを作って、そのボタンをクリックすると、右にＡの画像が出て、また同じボタンをクリックすると、Ａの画像とは違う場所にＢの画像が出てくる、その時出来ればＡの画像は表示されないようにしたいのですが・・・こんな感じで同じ場所のクリックの回数でそれぞれ違う場所に画像を表示させたりって、できるんでしょうか？ 誰か教えてください。お願いします。
- ベストアンサー
- JavaScript
- フォームでボタンクリック後にそのページに内容を表示する
a.htmというファイルの中でフォームを使用しています。 フォームで送信のボタンを押すとフォームの内容を反映した文をphpを使用してb.phpに表示させています。 送信ボタンを押すとb.phpのページに飛んでしまいますが、a.htmの送信ボタンの次の行くらいにb.phpの内容を表示させるようにしたいです。 どのように記述すればできるでしょうか？
- 締切済み
- HTML
- 画像で作成したボタンの処理について
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文でできるような気がするが、サンプルとなるものがなく、書き方がわからない…。 上記について、ご回答よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- クリックによる画像の入れ替え処理について
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
- ボタンのクリックについて
ボタンのクリックについて質問です。 CreateWindow()を使ってボタンを作成して表示させているのですが、 ボタンに画像などを表示させている時にクリックをすると、 一瞬、画像などが表示されていない状態になります。 裏画面処理でやってみたりしたのですが出来ませんでした。 やりたい事としては、 http://hp.vector.co.jp/authors/VA018351/ のようにボタンをクリックしても、ちらつきがない様にしたいです。 開発環境 XP Visual Studio 2005 C、C++
- ベストアンサー
- C・C++・C#
- ボタン（画像）をクリックするたび表を切り替える方法
HTMLとcssで組み立てたサイトのページ内に設置したいものです。 タイトルボタン（画像 W300px）の下に表Ａ（簡単な<table>内にテキストがあるW300 H400くらいのもの）があって、 タイトルボタンをクリックするたびに表Ｂ、表Ｃに切り替わるようにしたいのですが、 JavaScriptか何かで可能でしょうか。 表の大きさはすべて同じです。 画像切り替えはできたのですが、どうしてもテキストありの表を切り替え表示したく、 悩んでおります。 宜しくお願い致します。
- ベストアンサー
- HTML
- ボタンをクリックすると・・・エクセル？
下記のようなことがしたいのですが、 office系のソフトでできますか？ ボタンをクリックする度に、 指定した場所に、A→B→C…と繰り返し表示が変わっていく。 できるのであれば、どのような方法で作ればいいのか教えてください。 宜しくお願いいたします。 環境：Win XP
- ベストアンサー
- オフィス系ソフト
