Thumbnailで画像置換 応用
段取り
- 白黒サムネイルをマウスオーバーするとカラーメイン画像に変化させる。
- レイアウトは下図の通り。
- メイン画像360px*270px、サムネイルは画像間の空きも計算に入れる。
上下左右の空きを10pxとすると、(360-10)/2=175、(270-10)/2=130。
ｈｔｍｌ ｊａｖａｓｃｒｉｐｔ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="ｕtf-8">
<title>jsの練習</title>
<link rel="stylesheet" href="ｃss/style-2.ｃss">
</head>
<body>
<div class="wrap">
<h1>Life with Bicycle</h1>
<div class="firstbox">
<p>
<img src="img/360_270/man.jpg" alt="man" name="mainImage">
<img src="img/180_135_mono/high-school_student-mono.jpg" alt="high school student" onMouseOver="mainImage.src='img/360_270/high-school_student.jpg'" onMouseOut="mainImage.src='img/360_270/man.jpg'">
<img src="img/180_135_mono/couple-mono.jpg" alt="couple" onMouseOver="mainImage.src='img/360_270/couple.jpg'" onMouseOut="mainImage.src='img/360_270/man.jpg'">
</p>
</div>
<div class="secondbox">
<p>
<img src="img/180_135_mono/parent_and_child-mono.jpg" alt="parent and child" onMouseOver="mainImage.src='img/360_270/parent_and_child.jpg'" onMouseOut="mainImage.src='img/360_270/man.jpg'">
<img src="img/180_135_mono/children-mono.jpg" alt="children" onMouseOver="mainImage.src='img/360_270/children.jpg'" onMouseOut="mainImage.src='img/360_270/man.jpg'">
<img src="img/180_135_mono/roadbike-mono.jpg" alt="roadbike" onMouseOver="mainImage.src='img/360_270/roadbike.jpg'" onMouseOut="mainImage.src='img/360_270/man.jpg'">
</p>
</div>
</div>
</body>
</html>
ｃｓｓ
@charset "utｆ-8";
/* reset
=================================== */
html,
body,
div,
h1,
img {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
img {
border: none;
vertical-align: bottom;
}
/* layout
===================================*/
body { background: #000 }
.wrap {
width: 555px;
margin: 30px auto;
}
.wrap h1 {
width: 545px;
text-align: center;
line-height: 1.6;
color: #FFF;
font-size: 24px;
font-weight: normal;
}
.firstbox img {
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.secondbox { clear: both }
.secondbox img { margin-right: 10px }
画像にそれぞれリンク有
