jsでサムネイルを拡大表示 複数設置するには

質問

自分なりにやってみているのですがどうにも解決できない状態に
なってしまいましたので教えて頂けたらと思います。
サムネイル画像をクリックすると拡大画像が表示されるjsを作成し
この仕組みを一つ設置するのは成功したのですが同じ仕組みを
同じページ内に複数設置するやり方が分かりません。
htmlは下記の様になっています。多少、省いております。
よろしくお願い致します。

<!--
myImg = new Array(0)
myImg[0] = ["img/img-1.jpg",""]
myImg[1] = ["img/img-2.jpg",""]
myImg[2] = ["img/img-3.jpg",""]

function chengeImg(i){
document.myPhoto.src = myImg[i][0];
}
//-->

<td>
<img src="img/img-1.jpg"name="myPhoto" width="500" height="400" id="myPhoto" /></td>
<td><img src="img/img-1.jpg" width="80" height="80"onmouseover="chengeImg(0)"/></td>
<td><img src="img/img-2.jpg" width="80" height="80"onmouseover="chengeImg(1)"/></td>
<td><img src="img/img-3.jpg" width="80" height="80"onmouseover="chengeImg(2)"/></td>

回答No.2

yambejp

こんな感じでしょうか
自分自身の画像をおきかえるならthisでわたしてやってください
この手のものはいちどimageオブジェクトを作ってやるのが常套かと。

<script>
var myImg = new Array();
myImg[0] = new Image;myImg[0].src="img/img-1.jpg";
myImg[1] = new Image;myImg[1].src="img/img-2.jpg";
myImg[2] = new Image;myImg[2].src="img/img-3.jpg";

function chengeImg(obj,i){
obj.src = myImg[i].src;
}
</script>

<img ・・・ onmouseover="chengeImg(this,0)"/></td>

お礼

yambejp様

早速の回答ありがとうございます。
長い時間困っていましたので大変助かりました。
参考にさせていただき作業してみたいと思っております。

回答No.1

noname#140971

onMouseOver ="update_src(document.main.holiday_photo, a_images[0]);"

function update_src(objects, img) {
　　objects.src = img.src;
}

と、どこにどれを表示という引数を２つ持つ関数にすればと思います。

お礼

Husky2007　様

貴重な回答ありがとうございました。
同じ表示の仕方でも方法は色々あるものなのですね
長い時間、あーでもないと一人で悩んでおりましたので
助かりました。本当にありがとうございました！