サムネールで画像置換

作ってみた

※マウスイベントは、画像から想像して作りなさい。


作成したもの



<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>js17|サムネールで画像置換</title>
<style type="text/css">
<!--
* {
  margin:0;
  padding:0;
  font-family:
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"Hiragino Kaku Gothic Pro W3",
	"メイリオ",
	Meiryo,
	Osaka,
	"ＭＳ Ｐゴシック",
	"MS PGothic",
	sans-serif;
}
#container {
	width: 690px;
	margin: 0 auto;
	text-align: center;
}
h1 {
	color: #4898DF;
	font-size: 1.8em;
	margin: 30px 0 20px 0;
}
p.main {
	background-color: #FFF;
	background-image: url(images/frame.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 510px;
	width: 670px;
	margin: 0px auto;
}
img {
	border: none;
}
p.main img {
	margin-top: 15px;
}
p.thumbnail {
	margin-bottom: 10px;
}
p.thumbnail img {
	margin: 0 5px 0 0;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>伊江島にいるクマノミ</h1>
<p class="thumbnail">
<img src="images/thumb01.jpg" width="120" height="90" alt="セジロクマノミ" onMouseOver='document.mainImg.src="images/main01.jpg"'>
<img src="images/thumb02.jpg" width="120" height="90" alt="トウアカクマノミ" onMouseOver='document.mainImg.src="images/main02.jpg"'>
<img src="images/thumb03.jpg" width="120" height="90" alt="ハナビラクマノミ" onMouseOver='document.mainImg.src="images/main03.jpg"'>
<img src="images/thumb04.jpg" width="120" height="90" alt="カクレクマノミ" onMouseOver='document.mainImg.src="images/main04.jpg"'>
<img src="images/thumb05.jpg" width="120" height="90" alt="ハマクマノミ" onMouseOver='document.mainImg.src="images/main05.jpg"'>
</p>
<p class="main"><img src="images/main01.jpg" width="640" height="480" alt="" name="mainImg"></p>
</div>
</body>
</html>