※ ChatGPTを利用し、要約された質問です（原文：マウスオーバーで複数の画像を切り替える）
マウスオーバーで複数の画像を切り替える方法
このQ&Aのポイント
マウスオーバーで複数の画像を切り替える方法についてお知りになりたいです。
現在、特定の要素内の複数の画像をマウスオーバーで切り替えたいですが、うまくいきません。
特に、テーブル内の要素を削除すると動作しなくなる問題があります。どうすれば解決できるでしょうか？
こんにちわ、お知恵を拝借させて下さい。
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が入っているテーブルを削除すると動作するのですが、この状態ではどうしても動作させることができません。
何か、良い方法はないでしょうか
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
_pipi_さんありがとう御座います。 おかげさまで、無事改良する事ができました、まだまだ勉強が足りないようです、ご教授頂きました内容で「CSS」と「Javascript」に関しては外部に読み込む形にしてみました。 また、このページを閲覧する次の方へ <div id="t2"> <table width="438" border="0" cellpadding="3" cellspacing="0"> <tr><th width="30%">JAN</th><th width="46%">型番</th><th width="24%">カラー</th></tr> <tr><td>19</td><td>BK</td><td><a href="#" onClick="chg(19) ">ブラック</a></td></tr> <tr><td>26</td><td>GY</td><td><a href="#" onClick="chg(26)">グレー</a></td></tr> <tr><td>33</td><td>NV</td><td><a href="#" onClick="chg(33)">ネイビー</a></td></tr> <tr><td>40</td><td>GR</td><td><a href="#" onClick="chg(40)">グリーン</a></td></tr> <tr><td>57</td><td>OR</td><td><a href="#" onClick="chg(57)">オレンジ</a></td></tr> <tr><td>64</td><td>RD</td><td><a href="#" onClick="chg(64)">レッド</a></td></tr></table><!-- この部分は</table>で閉じてください --> </div> ありがとう御座いました。