■

授業メモ

6/13授業メモ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>imgaeオブジェクト</title>
<style type="text/css">
<!--
{
	margin: 0;
	padding: 0;
}
body {
	color:#FFF; 
	background:#000;
}
#container {
	text-align: center;
	width: 830px;
	margin: 30px auto 0 auto;
}
h1 {
	font-size: 1.8em;
	margin: 0 0 15px 0;
}
p {
	font-size: 0.9em;
	margin: 0 0 10px 0;
}
p img {
	margin: 0 5px 0 0;
}
img{
	cursor:pointer;
	}
-->
</style>
</head>
<body>
<div id="container">
<h1>松本工務店の写真</h1>
<p>※画像上へマウスを移動すると、その画像をカラーで表示できます。</p>
<p>
<img src="images/001.jpg" width="400" height="300" alt="" 
onMouseOver="this.src='images/o01.jpg'" onMouseOut="this.src='images/001.jpg'">
<img src="images/002.jpg" width="400" height="300" alt=""
onMouseOver="this.src='images/o02.jpg'" onMouseOut="this.src='images/002.jpg'">
<img src="images/003.jpg" width="400" height="300" alt=""
 onMouseOver="this.src='images/o03.jpg'" onMouseOut="this.src='images/003.jpg'">
<img src="images/004.jpg" width="400" height="300" alt="" 
onMouseOver="this.src='images/o04.jpg'" onMouseOut="this.src='images/004.jpg'">
<img src="images/005.jpg" width="400" height="300" alt="" 
onMouseOver="this.src='images/o05.jpg'" onMouseOut="this.src='images/005.jpg'">
<img src="images/006.jpg" width="400" height="300" alt=""
 onMouseOver="this.src='images/o06.jpg'" onMouseOut="this.src='images/006.jpg'"></p>
</div>
</body>
</html>