My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

3/15 [JavaScript] 画像置換

本日の授業テーマ

本日の学習内容

【演習】

サムネール画像にマウス移動すると、メインの画像が置換されるようにする

[ポイント]


[習作]
f:id:sntkk3:20140731042708j:plain


[ソース]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ソファーのあるインテリア</title>
<style>
body {
  font-size: 16px;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}
img {
  border: none;
  vertical-align: bottom;
}
.imgBox {
  width: 600px;
  margin: 50px auto;
}
.thumbnail {
  /*width: 610px;*/
  text-align: center;
}
.thumbnail img {
  /* margin-right: 10px; */
  /* text-align: center; */
}
.mainImg {
  width: 600px;
  height: 600px;
  text-align: center;
  margin-top: 10px;
  padding-top: 20px; 
  background:url(img/drframe.jpg) no-repeat center -13px;
}
h2 {
  color: #82A76D;
  font-size: 18px;
  margin: 10px 0;
  text-align: center;
}
</style>
</head>
<body>
<div class="imgBox">
<h2>ソファーのあるインテリア</h2>
<div class="thumbnail">
<img src="img/0315s01.jpg" alt="" onMouseOver="mainImg.src='img/0315L01.jpg'" onMouseOut="mainImg.src='img/0315L01'" >
<img src="img/0315s02.jpg" alt="" onMouseOver="mainImg.src='img/0315L02.jpg'" onMouseOut="mainImg.src='img/0315L01.jpg'" >
<img src="img/0315s03.jpg" alt="" onMouseOver="mainImg.src='img/0315L03.jpg'" onMouseOut="mainImg.src='img/0315L01.jpg'" >
<img src="img/0315s04.jpg" alt="" onMouseOver="mainImg.src='img/0315L04.jpg'" onMouseOut="mainImg.src='img/0315L01.jpg'" >
<img src="img/0315s05.jpg" alt="" onMouseOver="mainImg.src='img/0315L05.jpg'" onMouseOut="mainImg.src='img/0315L01.jpg'" >
</div><!--thumbnail-->
<div class="mainImg"><img src="img/0315L01.jpg" alt="" name="mainImg">
</div><!--mainImg-->
</div><!--imgBox-->
</body>
</html>