画像のロールオーバー
画像のロールオーバーで下記のスクリプトを教えてもらいました。
画像aをマウスオーバーで画像a2に変わる
クリックでオーバーした状態を保持（画像a2のまま）
さらに、画像bをマウスオーバーで画像b2に変わり
クリックでオーバーした状態を保持（画像b2のまま）
そのクリック時、画像a2が画像aに変わる
実装できたのですが。
下記のソース２つテーブルが１つのhtml上にあり
a～fまでg～iまで画像が分かれていて
a～fをクリックし画像が変わった後
g～iをクリックするとa～fの画像が変わらないようにしたいのです。
二つのテーブルの画像を別々に考えたいのですが、できますでしょうか？
よろしくお願いします。
<html>
<head>
<style type="text/css">
<!--
img.group {width: 111px; height:50px;}
-->
</style>
<script type="text/javascript"><!--
var img=['a.jpg,a2.jpg','b.jpg,b2.jpg','c.jpg,c2.jpg','d.jpg,d2.jpg','e.jpg,e2.jpg','f.jpg,f2.jpg','g.jpg,g2.jpg','h.jpg,h2.jpg','i.jpg,i2.jpg'];
var elm=[]; var o_idx=-1;
window.onload=function(){
var e=document.getElementsByTagName('IMG');
for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i];
for (i=0; i<elm.length; i++){
elm[i].onmouseover=change(i,1);
elm[i].onmouseout=change(i,0);
elm[i].onclick=change(i,2);
}
}
function change(idx,n){
return function(){
if (n > 1){
if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0];
elm[idx].src=img[idx].split(',')[1];
o_idx=idx;
} else {
if (idx != o_idx) elm[idx].src=img[idx].split(',')[n];
}
};}
// --></script>
</head>
<body>
<table width="676" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td>
<td width="2"></td>
<td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td>
<td width="2"></td>
<td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td>
<td width="2"></td>
<td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td>
<td width="2"></td>
<td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td>
<td width="2"></td>
<td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td>
</tr>
</table>
<br>
<table width="333" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td>
<td width="2"></td>
<td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td>
<td width="2"></td>
<td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td>
</tr>
</table>
</body>
</html>
お礼
早々のご回答ありがとうございました。 talepandaさんのアドバイス 【slideshow関数が2個あります。】がヒントになりました。（＊slideshowが関数だとも知らない私・・） 考えて作りなおしたら、動きました。 アドバイスありがとうございます。大感謝です！ あつかましいですが・・ JavaScriptの勉強方法も教えていただけると、うれしです。 <HTML> <HEAD> <TITLE> </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=1; var j=1; picture=new Array(); for(i=1; i<=4; i++){ picture[i] = new Image(); }; picture[1].src = "akaemi.jpg"; picture[2].src = "noristop2.jpg"; picture[3].src = "ume.jpg"; picture[4].src = "mizuba.jpg"; photo=new Array(); for(i=1; i<=4; i++){ photo[i] = new Image(); }; photo[1].src = "tyou1.jpg"; photo[2].src = "tyou2.jpg"; photo[3].src = "tyou3.jpg"; photo[4].src = "tyou4.jpg"; function slideshow(){ img1.src= picture[j].src; img2.src= photo[j].src; j++; if(j>=5){ j=1 }; setTimeout("slideshow()",2500); } //--> </SCRIPT> </HEAD> <BODY onLoad="slideshow()"> <TABLE WIDTH="770" BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TBODY> <TR> <TD WIDTH="" HEIGHT=""> <IMG SRC="akaemi.jpg" ID="img1" WIDTH="" HEIGHT="" ></TD> <TD WIDTH="" HEIGHT=""> <IMG SRC="tyou1.jpg" ID="img2" WIDTH="" HEIGHT="" ></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>