マウスオーバーで複数の画像を切り替える
こんにちわ、お知恵を拝借させて下さい。
1週間以上探していますが、なかなか答えに結びつきません。
現在下記の内容で<div id="photoAlbum"></div>内の二つの画像の同時切替を行なおうとおもっております。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<table width="570">
<tr>
<td><div id="photoAlbum"><img src="19.jpg" width="280" height="280"><img src="19pt01.jpg" width="280" height="280"></div></td>
</tr>
<tr>
<td align="center"><img src="19.jpg" width="80" height="80" id="changeButton1"> <img src="26.jpg" width="80" height="80" id="changeButton2"> <img src="33.jpg" width="80" height="80" id="changeButton3"> <img src="40.jpg" width="80" height="80" id="changeButton4"> <img src="57.jpg" width="80" height="80" id="changeButton5"> <img src="64.jpg" width="80" height="80" id="changeButton6"></td></tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td><table width="438" border=0 cellpadding=3 cellspacing=1 bgcolor="#999999" style="FONT-SIZE: 9pt; LINE-HEIGHT: 100%">
<tr bgcolor=#e6e6e6>
<td width="30%" nowrap><SPAN style="FONT-SIZE: 8pt"> JAN</SPAN></td>
<td width="46%" nowrap><SPAN style="FONT-SIZE: 8pt"> 型番</SPAN></td>
<td width="24%" nowrap><SPAN style="FONT-SIZE: 8pt"> カラー</SPAN></td>
</tr>
<tr bgcolor=#ffffff>
<td><SPAN> 19</SPAN></td>
<td><SPAN> BK</SPAN></td>
<td><SPAN> <a href="#" id="changeButton7">ブラック</a></SPAN></td>
</tr>
<tr bgcolor=#ffffff>
<td><SPAN> 26</SPAN></td>
<td><SPAN> GY</SPAN></td>
<td><SPAN> <a href="#" id="changeButton8">グレー</a></SPAN></td>
</tr>
<tr bgcolor=#ffffff>
<td><SPAN> 33</SPAN></td>
<td><SPAN> NV</SPAN></td>
<td><SPAN> <a href="#" id="changeButton9">ネイビー</a></SPAN></td>
</tr>
<tr bgcolor=#ffffff>
<td><SPAN> 40</SPAN></td>
<td><SPAN> GR</SPAN></td>
<td><SPAN> <a href="#" id="changeButton10">グリーン</a></SPAN></td>
</tr>
<tr bgcolor=#ffffff>
<td><SPAN> 57</SPAN></td>
<td><SPAN> OR</SPAN></td>
<td><SPAN> <a href="#" id="changeButton11">オレンジ</a></SPAN></td>
</tr>
<tr bgcolor=#ffffff>
<td><SPAN> 64</SPAN></td>
<td><SPAN> RD</SPAN></td>
<td><SPAN> <a href="#" id="changeButton12">レッド</a></SPAN></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
window.onload = function(){
document.getElementById("changeButton1").onmouseover = function() {
album2.change(["19.jpg","19pt01.jpg"]);
}
document.getElementById("changeButton2").onmouseover = function() {
album2.change(["26.jpg","26pt01.jpg"]);
}
～中略～
document.getElementById("changeButton12").onmouseover = function() {
album3.change(["64.jpg","64pt01.jpg"]);
}
}
var album2 = {
change : function(imageArray){
var imgTag = document.getElementById("photoAlbum").getElementsByTagName("img");
for (var i=1; i<imgTag.length; i++){
imgTag[i].src = imageArray[i];
}
var album3 = {
change : function(imageArray){
var imgTag = document.getElementById("photoAlbum.mainbody").getElementsByTagName("img");
for (var i=1; i<imgTag.length; i++){
imgTag[i].src = imageArray[i];
}
}
}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
上記内容で試していますが、changeButton7～12が入っているテーブルを削除すると動作するのですが、この状態ではどうしても動作させることができません。
何か、良い方法はないでしょうか
補足
正規表現で取り出す方法は私も検討したのですが、具体的に取り出す正規表現がよくわかりません。甘えているかもしれませんが、具体的にご教授いただけると幸いです。