クリックによる画像の入れ替え処理について

質問

HTML、CSS、Javascriptを勉強中の初心者です。
あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。

あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。
(1)Aがクリックされたら、AをA2に置き換える
(2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる

質問内容は以下です。
(1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。
　クリックした状態のままにするには他にどのような処理が必要なのか。
(2)jQuery？でできるような気がするが、サンプルとなるものがなく、書き方がわからない。
　（調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした）

上記について、ご回答よろしくお願いします。

回答No.2

yambejp

じゃこんな感じで処理してみてください

<script>
var imgs=[
{"img_id":"a_img","org_img":"a.jpg","new_img":"a2.jpg"}
,{"img_id":"b_img","org_img":"b.jpg","new_img":"b2.jpg"}
,{"img_id":"c_img","org_img":"c.jpg","new_img":"c2.jpg"}
];

function imgchange(t){
for(var i=0;i<imgs.length;i++){
var img=document.getElementById(imgs[i]["img_id"]);
var oImg=imgs[i]["org_img"];
var nImg=imgs[i]["new_img"];
img.src=(t==img)?nImg:oImg;
}
}
</script>
<img src="a.jpg" id="a_img" onclick="imgchange(this)">
<img src="b.jpg" id="b_img" onclick="imgchange(this)">
<img src="c.jpg" id="c_img" onclick="imgchange(this)">

補足

ご丁寧にありがとうございます。
試してみたのですが、怪しげな挙動をしてしまってます…。

クリック時の処理の他、マウスオーバー時の処理も入れており、それぞれA’、B’、C’という画像を使っています。
上記のスクリプトを実装したところ、クリック時は問題なくA2の画像になったのですが、それと同時にBがB’になりました。
同じようにB（B’で表示されてしまったB）をクリックすると、今度はCがC’に…という具合です。
ちなみに、クリック後にカーソルを外すと、それぞれA、B、Cの元の画像に戻ります。（A2、B2、C2で表示されない）

マウスオーバーのスクリプトは、DWで設定できるMM_swapImgRestore、MM_findObj、MM_swapImage、MM_preloadImagesを使っています。

言葉での説明となってしまい、大変わかりづらく、申し訳ございません…。

回答No.1

yambejp

いくつか疑問点

→「画像で作成したボタンA」とはimgタグなのですか？
それとも何か別のボタン的な何かなのでしょうか？
→A2をクリックしたときにAに戻す必要はありますか？
→Cをクリックしたときにも同様の処理が必要ですか？

補足

説明不足で申し訳ございません。

→「画像で作成したボタンA」とはimgタグなのですか？
＞imgタグになります。

→A2をクリックしたときにAに戻す必要はありますか？
＞A2が表示されている状態でA2をクリックした場合は、A2のままである（Aに戻すことはしない）という想定です。

→Cをクリックしたときにも同様の処理が必要ですか？
＞はい。同じようにCがクリックされたらC2を表示、AとBはそのまま、という風にしたいです。