Javascriptを使ってカーソルが触れると画像を変更する。

今回は通信販売サイトでよくある商品詳細ページでサムネイル画像にカーソルがきた時に
メインの大きな画像を切り替えていく動きをJavascriptで再現したいと思います!

■イメージ図

■使用したHTMLのコードはこちら

<table class="item">
 <tr>
   <td colspan="3" align="center">
     <IMG src="img/item_01.jpg" width="480" height="680" name="itemImage">
     </td>
 </tr>
 <tr>
   <td>
     <a href="javascript:void(0)" onmouseover="myChgPic( 'img/item_01.jpg' )">
     <IMG src="img/item_01s.jpg" width="144" height="204"></a>
   </td>
   <td>
      <a href="javascript:void(0)" onmouseover="myChgPic( 'img/item_02.jpg' )">
      <IMG src="img/item_02s.jpg" width="144" height="204"></a>
   </td>
   <td>
     <a href="javascript:void(0)" onmouseover="myChgPic( 'img/item_03.jpg' )">
     <IMG src="img/item_03s.jpg" width="144" height="204"></a>
   </td>
 </tr>
</table>

tableの上段にnameにitemImageと指定したメイン画像を置き、
下段にはtdにあるサムネイル画像にマウスカーソルを合わせるとonmouseoverでmyChgPicに大きな画像のurlを指定します。

■使用したjavascriptのコードはこちら

<script type="text/javascript">
function myChgPic(myPicURL){
     document.images["itemImage"].src = myPicURL;
}
</script>

HTMLで指定したmyChgPicに対して
tdの上段で指定したname=itemImageの画像のURLを
document.imagesで書き換えるという
3行のシンプルなコードで完成！

■下記は実際動かしたDEMOです。