ロールオーバー？？？？？

質問

java初心者につきご迷惑お掛けします。

実は↓のような機能をホームページに付けたいのですが、上手くいかず悩んでいます。

ロールオーバーと呼ぶのでしょうか？
大きなメイン画像が1つあり、隣に小さなサブ画像が数個並んでいて、そのそれぞれのサブ画像にカーソルを持っていくと、メイン画像がそのサブ画面の画像に切り替わっていくというものです。
更には、その1セット（メイン画像×1、サブ画像数個）を、上から下へと複数設置したいと考えております。

web上で見つけた↓ソースを使って試したのですが、単独の場合は上手くいくのですが、複数を設置すると、どの部分のサブ画像を押しても、最後に設置した部分のメイン画像が変わるだけで、後はまったくの機能しません。
それぞれがきちんと機能するようにしたいのですが、どのようにすればよいでしょうか？

<script language="JavaScript">
<!--
function change(fname){
document.images['CHANGE'].src=fname;
}
function restore(){
document.images['CHANGE'].src="メイン画像.jpg";
}
//-->
</script>
<img name="CHANGE" img src="メイン画像.jpg"><br>
<span onmouseover="change('サブ画像1.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像1.jpg"></span>
<span onmouseover="change('サブ画像2.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像2.jpg"></span>
<span onmouseover="change('サブ画像3.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像3.jpg"></span>
<span onmouseover="change('サブ画像4.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像4.jpg"></span>

回答No.1

suzuki-_- · ベストアンサー

■スクリプトは複数書かず以下の１セットのみ
<script language="JavaScript">
<!--
function change(fname,num){
oldf = document.images['CHANGE' + num].src;
oldn = num;
document.images['CHANGE' + num].src=fname;
}
function restore(){
document.images['CHANGE' + oldn].src= oldf;
}
//-->
</script>

■複数設置したいだけ下記部分を増やす
■その際メイン画像部分のnameである CHANGE の後ろに数字を付ける
■各ロールオーバー部分 onmouseover="change('画像パス','付けた数字')" に変更
■例 １セット目
<img name="CHANGE1" src="メイン画像1.jpg"><br>
<span onmouseover="change('サブ画像1.jpg','1')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像1.jpg"></span>
：
：

■例 ５セット目
<img name="CHANGE5" src="メイン画像5.jpg"><br>
<span onmouseover="change('サブ画像1.jpg','5')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像1.jpg"></span>
：
：

お礼

さっそくのお返事ありがとうございました。
半日間も悩んでいたのがウソのように、「あっ！！！」と言う間に解決してしまいました。ホントにホントにありがとうございました。
心からお礼申し上げます。