クリックして変更した画像を他の画像をクリックしたとき戻すには？

質問

複数の同じ画像があるとします。
そのひとつをクリックすると画像が変わるようにします。
その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか？
どなたかご教授おねがいします。
できるだけリンクタグは使わないようにしたいです。

回答No.1

yambejp · ベストアンサー

いろいろやりかたありそうですが
たとえば、グルーピングにclassをつかってこんな感じで

<script>
function change(obj){
var orgimg="a.gif";
var newimg="b.gif";
var imgs=document.getElementsByTagName('img')
for(var i=0;i<imgs.length;i++){
if(imgs[i].className==obj.className){
if(imgs[i]==obj) imgs[i].src=newimg;
else imgs[i].src=orgimg;
}
}
}
</script>

<img src="a.gif" class="hoge" onClick="change(this)">
<img src="a.gif" class="hoge" onClick="change(this)">
<img src="a.gif" class="hoge" onClick="change(this)">

お礼

自分の思い通りにうまくいきました。
ご回答ありがとうございました。

回答No.2

noname#176215

クリックした時点で 全部の画像を元の画像に戻して その後でクリック
した画像だけ 別画像に変更してやればいいんじゃないでしょうか。