ボタンクリック時にボタンの状態を切り替える

解決済

質問者：champl
質問日時：2009/04/29 23:03
回答数：2件

AとBというボタン(画像)があります。それぞれのボタンは通常の状態とアクティブ状態の2つの画像があり
AとBで計4つのボタンがあります。

初めの状態はAのボタンがアクティブ状態でAの内容がページ内のしかるべき場所に表示されています。
Bのボタンをクリックした際にはBのボタンがアクティブ状態になりAのボタンは通常状態に戻り
Bの内容がinnerhtmlを使用してAの内容が表示されている場所にBの内容が表示されるというような感じにしたいのですが
innerhtmlを使用してAとBの内容の切り替えはできたのですがAとBのボタンの状態の切り替え方がうまくできないのです。
どなたかサンプルをご提示していただきアドバイスいただけると助かります。

ちなみに今回はボタン2つで説明させていただきましたが
将来的にはボタンは10個位になる予定です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： _pipi_
回答日時：2009/04/30 10:14

<!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>

- 0
- 件

通報する

No.1

回答者： SortaNerd_
回答日時：2009/04/30 03:09

面白そうだったので書いてみました。

自由度は高くしたつもりなので適に書き換えて使ってください。

<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>