PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【JavaScript】サムネイルを押すと、その画像に切り替える画像一覧

f:id:game-web-design:20140928222338p:plain


サムネイルにマウスポンタをのせるとと、下の大きな画像を切り替える画像一覧をつくります。


name属性を使い下の画像だけを変える

画像の置換の方法は前回の記事の方法を使います。

大きな画像の中にname属性を入れることで、imgタグに指定してある画像を切り替えることができます。



ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像置換</title>
<style>
html, body, img{
  padding: 0;
  margin: 0;
}

img{
  border: none;
  vertical-align: bottom;
}

.imgbox{
  width: 600px;
  padding: 10px;
  margin: 10px auto;
}

.thum{
  text-align: center;
}

.thum img{
  margin-right: 10px;
}

.thum img:last-child{
  margin-right: 0;
}

.bigimg{
  width: 600px;
  height: 440px;
  background: url(img/bg.png) no-repeat center 0;
  text-align: center;
  padding-top: 20px;
}

</style>

</head>

<body>
<div class="imgbox">
<div class="thum">
<img src="img/thum_01.png" alt="" onmouseover="mainimg.src='img/01.png'" onmouseout="mainimg.src='img/01.png'"><img src="img/thum_02.png" alt="" onmouseover="mainimg.src='img/02.png'" onmouseout="mainimg.src='img/02.png'"><img src="img/thum_03.png" alt="" onmouseover="mainimg.src='img/03.png'" onmouseout="mainimg.src='img/03.png'"><img src="img/thum_04.png" alt="" onmouseover="mainimg.src='img/04.png'" onmouseout="mainimg.src='img/04.png'"><img src="img/thum_05.png" alt="" onmouseover="mainimg.src='img/05.png'" onmouseout="mainimg.src='img/05.png'">
</div>
<div class="bigimg">
<img src="img/01.png" name="mainimg">
</div>
</div>
</body>
</html>