【コピペで使える】超シンプルな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;
}
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
