【コピペで使える】超シンプルなJavascript画像切り替えスクリプトサンプル

はじめに

大きな画像の下に、小さなサムネイル画像のリストがあり、サムネイル画像のマウスを乗せると大きな画像がそのサムネイル画像に切り替わる。

ショッピングサイトなんかでよく見る仕様です。

省スペースで多くの商品画像を見せられることから、とてもユーザビリティの高い機能と言えます。

今回は、JQueryやライブラリを使わずに、プレーンなJavascriptでシンプルにこの仕様を実現するサンプルをご紹介したいと思います。

是非、カスタマイズして活用頂ければと思います。
 

HTML部

<div id="pimg">
<div id="pimg-main"><img src="サンプル画像1" alt="" id="pimg-main-img" width="100%" height=""></div>
<ul>
 	<li><img src="サンプル画像1" alt="" id="pimg1" onmouseover="choice('pimg1')" width="100%" height="100%"></li>
 	<li><img src="サンプル画像2" alt="" id="pimg2" onmouseover="choice('pimg2')" width="100%" height="100%"></li>
<li><img src="サンプル画像3" alt="" id="pimg3" onmouseover="choice('pimg3')" width="100%" height="100%"></li>
</ul>
</div>

リスト要素はいくつ増やしても構いません。増やす数に合わせて、idとchoice(”)内の数字を増やしてゆけばよいだけです。
 

Javascript部

<script>
function choice(id){
  var img = document.getElementById(id);
  var src = img.getAttribute('src');
  document.getElementById("pimg-main-img").src = src;
}
</script>

マウスが乗っているimg要素をsrcを取得して、メインの画像のsrcに反映するという非常にシンプルな処理です。
 

CSS部

#pimg {
  width:100%;
}
#pimg ul {
  list-style:none;
  padding:0;
  margin:0;
  text-align:center;
}
#pimg ul li {
  display:inline-block;
  width:30px;
  height:30px;
  border:1px solid #d8d8d8;
}