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

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

■イメージ図

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

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

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

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

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