0714 JavaScript:カーソルを当てると画像がモノクロ→カラーになる処理
JavaScriptによる画像置換
カーソルを当てるとサムネイルがモノクロからカラーに変化し、かつ、カーソル上の画像が大きく表示されるような指示をする。
画像の準備
大画面用の５枚、サムネイル用のモノクロ／カラー各５枚の計15枚をPhotoshopを使って用意しておく。また、グリッドデザインを用いるので、大画面用とサムネイル用の高さ・幅をきちんと計算して作成する。
タグ打ち
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Something for daily use</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<ul>
<li><img src="img/01.jpg" alt="#" name="mainImage"></li>
<li><img class="right" src="img/sb01.jpg" alt="#" onMouseOver="mainImage.src='img/01.jpg', this.src='img/s01.jpg'" onMouseOut="mainImage.src='img/01.jpg', this.src='img/sb01.jpg'"></li>
<li><img class="right" src="img/sb02.jpg" alt="#" onMouseOver="mainImage.src='img/02.jpg', this.src='img/s02.jpg'" onMouseOut="mainImage.src='img/01.jpg', this.src='img/sb02.jpg'"></li>
<li><img src="img/sb03.jpg" alt="#" onMouseOver="mainImage.src='img/03.jpg', this.src='img/s03.jpg'" onMouseOut="mainImage.src='img/01.jpg', this.src='img/sb03.jpg'"></li>
<li><img src="img/sb04.jpg" alt="#" onMouseOver="mainImage.src='img/04.jpg', this.src='img/s04.jpg'" onMouseOut="mainImage.src='img/01.jpg', this.src='img/sb04.jpg'"></li>
<li><img class="right" src="img/sb05.jpg" alt="#" onMouseOver="mainImage.src='img/05.jpg', this.src='img/s05.jpg'" onMouseOut="mainImage.src='img/01.jpg', this.src='img/sb05.jpg'"></li>
</ul>
</div>
</body>
</html>
画像を全てリストに入れ、後ほどCSSで配置を変える。
CSS
@charset "UTF-8";
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
}
body{
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style: none; /* マーカーを消す */
}
a {
text-decoration: none; /* 下線を消す */
}
img {
border: 0;
vertical-align: bottom;
}
/* layout */
#container{
margin: 20px auto;
width: 610px;
overflow: hidden;
}
li{
float: left;
}
img{
margin: 0 20px 20px 0;
}
img.right{
margin-right: 0;
}
全てのimgにmargin指定をした後に右に来る３つの画像だけをclass化して、margin-rightを0と指定する事で余計なmarginを消してレイアウトを整える。
完成図
hover時にサムネイルがモノクロからカラーになり、左上に大きな画像が表示されました。
今日の路線図
湘南まで！
