onMouseOverでサムネイルをマウスオーバーするとメイン画像が入れ替わる簡単な写真ギャラリー

☆手順☆
各サムネイル画像
altの後に↓追加と
onMouseOver="document.mainImg.src='マウスオーバー時にメイン画像に表示したい画像パス'"

mainのimgタグaltの後に↓追加するだけ
name="mainImg"

ex
各サムネイル画像
<img src="images/s1.jpg" width="100" height="100" alt="">
↓
<img src="images/s1.jpg" width="100" height="100" alt="" onMouseOver="document.mainImg.src='images/01.jpg'">

メイン画像
<p class="main"><img src="images/1.jpg" width="600" height="450" alt=""></p>
↓
<p class="main"><img src="images/1.jpg" width="600" height="450" alt="" name="mainImg"></p>

▼デモ
http://jewelcafe.main.jp/0613/sam/01.html

☆ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サムネールで画像置換</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0;
}
img {
  border: none;
  vertical-align: bottom;
}
#container {
  width: 700px;
  margin: 0 auto;
  text-align: center;
}
h1 {
  color: #82A76D;
  font-size: 1.1em;
  margin: 10px 0 0 0;
}
p.main {
  background-color: #FFF;
  background-image: url(images/main.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 510px;
  width: 660px;
  margin: 0px auto;
}
p.main img {
  margin-top: 10px;
}
p.thumbnail {
  margin: 0 0 0 5px;
}
p.thumbnail img {
  margin: 0 5px 0 0;
  cursor: pointer;
}
-->
</style>
</head>
<body>
<div id="container">
<noscript>
<p>このWebページはJavaScriptを使用しています。<br>
お使いのブラウザがJavaScriptに未対応の場合や<br>
JavaScriptの設定が無効になっている場合には、<br>
正しく表示されないことがあります。</p>
</noscript>

<h1>富士山の画像集</h1>
<p class="thumbnail">
<img src="images/s1.jpg" width="100" height="100" alt="" onMouseOver="document.mainImg.src='images/1.jpg'">
<img src="images/s2.jpg" width="100" height="100" alt="" onMouseOver="document.mainImg.src='images/2.jpg'">
<img src="images/s3.jpg" width="100" height="100" alt="" onMouseOver="document.mainImg.src='images/3.jpg'">
<img src="images/s4.jpg" width="100" height="100" alt="" onMouseOver="document.mainImg.src='images/4.jpg'">
<img src="images/s5.jpg" width="100" height="100" alt="" onMouseOver="document.mainImg.src='images/5.jpg'">
</p>
<p class="main"><img src="images/1.jpg" width="600" height="450" alt="" name="mainImg"></p>
</div>
</body>
</html>