人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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


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

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

●質問者: sango_clip
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:のし アクティブ アドバイス クリック ボタン
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kn1967
●35ポイント

画像ボタンと言っても

・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入門


2 ● Mars
●35ポイント

手抜きサンプル。

ライブラリ(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が使えますので)

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ