JavaScriptによる画像置換

JavaScript 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptによる画像置換</title>
<style>
html,body,div,img {
margin: 0;
padding: 0;
line-height: 1.0;
}
.imgBox {
width: 600px;
margin: 50px auto;
}
.thumnail {
width: 610px;
text-align: center;
}
.thumnail img {
margin-right: 10px;
}
.mainImg {
width: 600px;
height: 600px;
margin-top: 10px;
padding-top: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="imgBox">
<div class="thumnail">
<img src="img/01.jpg" alt="" onmouseover='mainImg.src="img/01.jpg"' onmouseout='mainImg.src="img/01.jpg"'><img src="img/02.jpg" alt="" onmouseover='mainImg.src="img/02.jpg"' onmouseout='mainImg.src="img/01.jpg"'><img src="img/03.jpg" alt="" onmouseover='mainImg.src="img/03.jpg"' onmouseout='mainImg.src="img/01.jpg"'><img src="img/04.jpg" alt="" onmouseover='mainImg.src="img/04.jpg"' onmouseout='mainImg.src="img/01.jpg"'><img src="img/05.jpg" alt="" onmouseover='mainImg.src="img/05.jpg"' onmouseout='mainImg.src="img/01.jpg"'>
</div><!-- /#thumnail -->
<div class="mainImg">
<img src="img/01.jpg" alt="" name="mainImg">
</div><!-- /#mainImg -->
</div><!-- /#imgBox -->
</body>
</html>


onmouseover マウスカーソルが指定した部分の上に乗ったとき
onmouseout マウスカーソルが指定した部分から外れたとき

他にも
onclick 指定した部分をクリックしたとき
などがあります。

気を付けること

img srcを改行するとスペースが出来てしまい、レイアウトが崩れるので改行を行わない。