Javascriptでの画像置換２

Js

onMouseout onMouseOver

ブラウザ表示

<img src="changeimg/DSCF7323_g.jpg" width="300" height="300" alt="とうきび" <!--元の画像はMouseOutと同じに-->
 onMouseOver="this.src='changeimg/DSCF7323.jpg'" <!--マウスホバー-->
 onMouseOut="this.src='changeimg/DSCF7323_g.jpg'">　<!--マウス離れたとき-->

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>imageオブジェクト</title>
    <style type="text/css">
    *{
		margin: 0;
		padding: 0;
	}
	body{
		color: #ffffff;
		background: #000000;
		}
	#container{
		text-align: center;
		width: 615px;
		margin: 30px auto 0 auto;
		}
	h1{
		font-size: 1.8em;
		margin: 0 0 15px 0;
		}
	p{
		font-size: 0.875em;
		margin: 0 0 10px 0;
		}
	p img{
		margin: 0 5px 0 0;
		}
    </style>
</head>
<body>
<div id="container">
<h1>初夏の農場</h1>
<p>画像上にマウスを移動すると、画像のカラー表示できます。</p>
<p><img src="changeimg/DSCF7323_g.jpg" width="300" height="300" alt="とうきび" onMouseOver="this.src='changeimg/DSCF7323.jpg'" onMouseOut="this.src='changeimg/DSCF7323_g.jpg'">
<img src="changeimg/DSCF7329_g.jpg" width="300" height="300" alt="えだまめ" onMouseOver="this.src='changeimg/DSCF7329.jpg'" onMouseOut="this.src='changeimg/DSCF7329_g.jpg'">
<img src="changeimg/SN3T0186_g.jpg" width="300" height="300" alt="たんぼ" onMouseOver="this.src='changeimg/SN3T0186.jpg'" onMouseOut="this.src='changeimg/SN3T0186_g.jpg'">
<img src="changeimg/SN3T0188.jpg" width="300" height="300" alt="ぴーまん" onMouseOver="this.src='changeimg/SN3T0188.jpg'" onMouseOut="this.src='changeimg/SN3T0188_g.jpg'">
<img src="changeimg/SN3T0234_g.jpg" width="300" height="300" alt="おくら" onMouseOver="this.src='changeimg/SN3T0234.jpg'" onMouseOut="this.src='changeimg/SN3T0234_g.jpg'">
<img src="changeimg/SN3T0264_g.jpg" width="300" height="300" alt="ほうれんそう" onMouseOver="this.src='changeimg/SN3T0264.jpg'" onMouseOut="this.src='changeimg/SN3T0264_g.jpg'">
</p>
</div>
</body>
</html>