- ベストアンサー
マウスオーバーで複数の画像を切り替える方法
- マウスオーバーで複数の画像を切り替える方法についてお知りになりたいです。
- 現在、特定の要素内の複数の画像をマウスオーバーで切り替えたいですが、うまくいきません。
- 特に、テーブル内の要素を削除すると動作しなくなる問題があります。どうすれば解決できるでしょうか？
- YO-SKnono
- お礼率100% (2/2)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <head> <style> #photoAlbum img { width:280px; height:280px; } #photoAlbum2 img { width:80px; height:80px; } td { font-size:9pt; line-height:100%; } th { font-size:8pt; background-color:#e6e6e6; } #t2 td,th { border-top:1px #999 solid;border-left:1px #999 solid; } #t2 table { border-right:1px #999 solid; border-bottom:1px #999 solid; } </style> </head> <body> <table width="570"> <tr><td><div id="photoAlbum"><img src="19.jpg" id="a1"><img src="19pt01.jpg" id="a2"></div></td></tr> <tr> <td align="center"> <div id="photoAlbum2"> <img src="19.jpg" onMouseOver="chg(19)"> <img src="26.jpg" onMouseOver="chg(26)"> <img src="33.jpg" onMouseOver="chg(33)"> <img src="40.jpg" onMouseOver="chg(40)"> <img src="57.jpg" onMouseOver="chg(57)"> <img src="64.jpg" onMouseOver="chg(64)"> </div></td> </tr> </table> <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> </div> <script> function chg(n){ document.getElementById('a1').src=n+'.jpg'; document.getElementById('a2').src=n+'pt01.jpg'; } </script> </body> </html>
![その他([技術者向] コンピューター) イメージ](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> ありがとう御座いました。