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


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


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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/04/29 23:06:52
  • 終了:2009/05/06 23:10:02

回答(2件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012009/04/30 07:48:50

ポイント35pt

画像ボタンと言っても

・IMGタグを使っている

・INPUTタグのimageを使っている

など、具体的にどのようにしているのかによって回答は変わってきますから

不具合を起こしているコードを投稿して

どこが「おかしい」などと指摘してもらうほうが良いでしょう。


実装方法はいろいろあると思いますが

とりあえず、たたき台として、一例を作ってみました。

<HTML>
<HEAD>
    <SCRIPT TYPE="text/javascript">
// グローバル変数定義
    var SelectionButton = 0;
    var HTMLandButton = new Array(3);
    HTMLandButton[0] = new Array("テキストA", "button1off.gif", "button1on.gif");
    HTMLandButton[1] = new Array("テキストB", "button2off.gif", "button2on.gif");
    HTMLandButton[2] = new Array("テキストC", "button3off.gif", "button3on.gif");
    HTMLandButton[3] = new Array("テキストD", "button4off.gif", "button4on.gif");
// 関数
    function ChangeInnerHTML(SelectNo){
        document.getElementById("F1").innerHTML =
            document.getElementById("F1").innerHTML.replace(
                HTMLandButton[SelectionButton][2], HTMLandButton[SelectionButton][1])
        ;
        SelectionButton = SelectNo;
        document.getElementById("F1").innerHTML =
            document.getElementById("F1").innerHTML.replace(
                HTMLandButton[SelectionButton][1], HTMLandButton[SelectionButton][2])
        ;
        document.getElementById("D1").innerHTML = HTMLandButton[SelectionButton][0];
    }
    </SCRIPT>
</HEAD>
<BODY onLoad="ChangeInnerHTML(0)">
    <FORM ID="F1" onSubmit="return false">
        <INPUT TYPE="image" ID="B0" SRC="button1off.gif" onClick="ChangeInnerHTML(0)" />
        <INPUT TYPE="image" ID="B1" SRC="button2off.gif" onClick="ChangeInnerHTML(1)" />
        <INPUT TYPE="image" ID="B2" SRC="button3off.gif" onClick="ChangeInnerHTML(2)" />
        <INPUT TYPE="image" ID="B3" SRC="button4off.gif" onClick="ChangeInnerHTML(3)" />
    </FORM>
    <DIV ID="D1"></DIV>
</BODY>
</HTML>

※あまり多すぎてもテストしづらいので4ボタンにしてあります。

※4ボタンなので画像ファイルは8つ用意しておく必要があります。

※off.gifがデフォルト。 on.gifが選択されている場合の表示用です。

※innerHTMLの書き換えは成功しているとの事で省くことも考えましたが

  同時に扱うほうが多分楽でしょうから、配列にして同時に扱ってます。

※IE6、FireFox2で動作確認してますがブラウザ毎の個別対応は特に行っていません。


URL必須とのことなので とほほのWWW入門

id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202009/04/30 13:05:58

ポイント35pt

手抜きサンプル。

ライブラリ(jQuery)使ってるし、

毎回全てのimgのsrcを書き換える。(10個ぐらいなら問題ないと思うけど、あんまり多いと遅い)

jQueryの解説

http://semooh.jp/jquery/

本家(ライブラリファイル入手先)

http://jquery.com/

--- HTML ---
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<p><img src="smplA1.gif"  alt="A" class="button" /></p>
<p><img src="smplB0.gif"  alt="B" class="button" /></p>
<p><img src="smplC0.gif"  alt="C" class="button" /></p>
</body>

--- sample.js ---
$(function(){ // document構築後の処理(onloadよりは早いタイミングで実行)
	$('.button').click(function(){ // onclick処理
		var O = this; // クリックされたエレメント
		$('.button').attr('src',function(){ // 属性 'src' の書き換え
			var str = $(this).attr('src'); // src属性値(ソース記述値)
			if(this == O) // クリックされたエレメントならアクティブに
				return str.replace(/[01]/,'1');
			else
				return str.replace(/[01]/,'0');
		});
	});
});

class="button" のimgを処理。

ファイル名中の 1/0 が アクティブ/非アクティブ に対応するものとしています。

実際の構成がわかれば全部のimgにclassを付ける必要はないかも。

(jQueryはCSS3相当のセレクタやXPATHが使えますので)

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません