画像のロールオーバー
画像のロールオーバーで下記のスクリプトを教えてもらいました。
画像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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
補足
ご連絡ありがとうございます。 B.html の解説画面の役目ですが、 Bがキャンパス部分になり、そのスペースで画像を切り替えるようにしたい感じです。 B.html サムネイル(1)、サムネイル(2)、サムネイル(3) ↓ ↓ ↓ C.html 解説(1) 解説(2) 解説(3) 解説画像はGIF,JPEGを予定しています。