JavaScriptのonclikについて

質問

いつもお世話になっております。
今回はJavaScriptで画像ボタンを使ったメニューの質問です。
画像ボタンが表示上imgA、imgB、imgC・・・とあり
imgA.gifの画像ボタンをクリックするとimgA-1.gifが入れ替わって表示され、imgBのボタンをクリックするとimgA-1のボタンはimgAの元のボタンが表示されるようにしたいのです。
どなたかご教授お願いします。
<SCRIPT language="JavaScript">
function chImgA(name){
document.imgA.src = name;
}
function chImg2(name){
document.imgB.src = name;
}
//↓
savImg = null;
savObj = null;

function chImgA( imgID_TAG , clickedImgURL ) {
}
function chImgB( imgID_TAG , clickedImgURL ) {
newObj = document.getElementById(imgID_TAG);

if (savImg != null) {
savObj.src = savImg;
}
savImg = newObj.src;
savObj = newObj;
newObj.src = clickedImgURL;

}
</SCRIPT>-->
<td><A HREF="top.html" target="_top" onClick="images.imgA.src = 'img/imgA-1.gif';return true;">
<IMG src="img/imgA.gif" ALT="" BORDER="1" name="imgA" ID="imgA"></A></td>

回答No.1

yambejp · ベストアンサー

これは、最初にオリジナルのイメージデータをとっておき、
クリックされるたびに、チェックをしてオリジナルデータと今のデータが
違うものは元に戻すというフローですね。

また、aタグでやっていますが、imgタグにそのままonClickを書いたほうが
明示的でわかりやすい気がしますが・・・。

以下サンプル

<script language="javascript">
window.onload=function(){
imgs=document.getElementsByTagName('img');
for(var i=0;i<imgs.length;i++){
imgs[i].orgImg=imgs[i].src;
}
}
function changeImg(obj,src){
for(var i=0;i<imgs.length;i++){
if(imgs[i].orgImg!=imgs[i].src) imgs[i].src=imgs[i].orgImg;
}
obj.src=src;
}
</script>
<IMG src="img/imgA.gif" ALT="" BORDER="1" onClick="changeImg(this,'img/imgA-1.gif')">
<IMG src="img/imgB.gif" ALT="" BORDER="1" onClick="changeImg(this,'img/imgB-1.gif')">
<IMG src="img/imgC.gif" ALT="" BORDER="1" onClick="changeImg(this,'img/imgC-1.gif')">

お礼

yambejpさんありがとうございます。
できました！！！！
感謝♪感謝♪