マウスオーバーやクリックで背景画像を切り替えるjavascript（レスポンシブ）

2015年12月1日

とっつぁん

この記事は 4 分くらいで読めると思います

あとで読む

マウスオーバーやクリックで画像を切り替える

コピペでオッケーです。

サムネイルをマウスオーバーやクリックした時に背景画像を切り替えたい、デフォルトでは任意の画像を表示させたい。

で、固定レイアウトのライブラリならよくあるんだけど、スマートフォンにも対応したのが欲しい。

とりあえず、こんな感じのUIを実装してほしいという要望があったので備忘録としてメモっときます。

デモを見てみる

こちらがデモ、サンプルの画像はVEGLキャラクター達を適当に使ってます。

※実際は背景画像ではなく指定の要素内のimgタグの画像が切り替わっていますがCSSのpositionで背景画像のような見せ方にしています。

DEMO

実装方法

※jqueryを使っています。

とりあえずコードの紹介。

まずはお約束、jqueryの読み込み。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

まぁ大抵の人はすでに使ってますよね…

HTML

<p><img src="img/01.jpg" class="switching" /></p>

<ul>
	<li><img src="img/02_thumb.jpg" class="thumb" /></li>
	<li><img src="img/03_thumb.jpg" class="thumb" /></li>
	<li><img src="img/04_thumb.jpg" class="thumb" /></li>		
</ul>

switchingというクラスのimgタグのsrcが切り替わります。

サムネイルの画像名は拡張子の前に _thumb を付けておきます。

※_thumbという名前のついた画像にマウスオーバー（クリック）したとき、指定要素内の画像を_thumb以外が同名の画像に差し替えています。

デフォルトの背景画像はsrcで指定した画像なので、必ずしもサムネイルと連動する必要はありません。

CSSは特に挙動には関係ないので割愛します、自由に設定してください。

Javascript（マウスオーバーの場合）

<script>
$(function() {
	$('img.thumb').mouseover(function(){
		var selectedSrc = $(this).attr('src').replace(/^(.+)_thumb(\.gif|\.jpg|\.png+)$/, "$1"+"$2");
		$('img.switching').stop().fadeOut(50,
			function(){
				$('img.switching').attr('src', selectedSrc);
				$('img.switching').stop().fadeIn(200);
			}
		);
	});

});
</script>

サムネイルのsrcの_thumbを引いた画像名を取得し、背景画像を切り替えています。

画像をaタグで囲えばマウスオーバーで背景画像切り替え、さらにクリックでリンク先にジャンプ、と言うような使い方もできます。

Javascript（クリック・タップの場合）

<script>
$(function() {
	$('img.thumb').click(function(){
		var selectedSrc = $(this).attr('src').replace(/^(.+)_thumb(\.gif|\.jpg|\.png+)$/, "$1"+"$2");
 		$('img.switching').stop().fadeOut(50,
			function(){
				$('img.switching').attr('src', selectedSrc);
				$('img.switching').stop().fadeIn(200);
			}
		);
	});

});
</script>

スマートフォンのようなタッチスクリーン場合はマウスオーバーという概念自体微妙なのでタッチして切り替わる方が現実的です。

今回はクリック時にリンク先にジャンプする必要が無かったのでこちらを採用。

シンプルすぎるのでいろいろ改造し甲斐もありそうですね。