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

はてなブックマーク - Javascriptを使ってカーソルが触れると画像を変更する。
[`yahoo` not found]

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

■イメージ図
js_over01

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

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

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

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

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

この記事を見た人は次の記事も見ています。