Javascriptでの画像置換3

Js

name属性

ブラウザ表示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>thumbnailの画像変換</title>
    <style type="text/css">
    *{
		margin: 0;
		padding: 0;
		}
	img{
	border: none;	
	}
	#container{
	width: 700px;
	height: auto;
	margin: 0 auto;
	text-align: center;
	}
	h1{
	color: #665737;
	font-size: 1.1em;
	margin: 10px 0 0 0;
	}
	p.main{
		background: #fff url(preview/bg.jpg) no-repeat center center;
		height: 460px;
		width: 660px;
		margin: 0 auto;
		}
	p.main img{
		margin-top: 30px;
		}
	p/thumbnail{
		margin: 0 5px 0 0;
		}
    </style>
</head>
<body>
<div id="container">
<h1>ソファのあるインテリア</h1>
<p class="thumbnail">
<noscript>
<p>このWebページはJavaScriptを使用しています。<br>
お使いのブラウザがJavaScriptに未対応の場合や<br>
JavaScriptの設定が無効になっている場合には、<br>
正しく表示されないことがあります。</p>
</noscript>
<img src="preview/file00018790802.jpg" width="112" height="84" onMouseOver="document.mainImg.src='preview/file00018790802.jpg'">
<img src="preview/file0001320754093.jpg" width="112" height="84" onMouseOver="document.mainImg.src='preview/file0001320754093.jpg'">
<img src="preview/file6221235657862.jpg" width="112" height="84" onMouseOver="document.mainImg.src='preview/file6221235657862.jpg'">
<img src="preview/file7881340638543.jpg" width="112" height="84" onMouseOver="document.mainImg.src='preview/file7881340638543.jpg'">
<img src="preview/file1861243993530.jpg" width="112" height="84" onMouseOver="document.mainImg.src='preview/file1861243993530.jpg'">
</p>
<p class="main">
<img src="preview/file1861243993530.jpg" width="600" height="400" alt="" name="mainImg">
</p>
</div>	
</body>
</html>