JavaScriptを使ったサムネールの作り方

JavaScript 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<ul class="thumbnail">
<li><img src="img/thum01.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img/img01.jpg'"></li>
<li><img src="img/thum02.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img/img02.jpg'"></li>
<li><img src="img/thum03.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img/img03.jpg'"></li>
<li><img src="img/thum04.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img/img04.jpg'"></li>
<li><img src="img/thum05.jpg" width="112" height="84" alt="" onMouseOver="document.mainImg.src='img/img05.jpg'"></li>
</ul>
<p class="main"><img src="img/img01.jpg" width="600" height="450" alt="" name="mainImg"></p>
<p class="footer">サムネイル</p>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

body,div,ul,li,p.img{
  margin:0;
  padding:0;
}
ul{
  list-style:none;
}
#container{
  padding:20px;
  margin:0 auto;
  width:730px;
  height:auto;
}
p.main{
  width:610px;
  float:left;
  margin-top:-10px;
}
ul.thumbnail{
  width:120px;
  float:right;
}
.footer{
  clear:both;
}
img{
  border:none;
  vertical-align:bottom;
}