jQuery マウスオーバーで画像入れ替え

マウスのカーソルを合わせると画像が入れ替わるサンプルです。

jQueryで画像の読み込みが完了した後に、オンマウスすると別の画像を表示します。

画像の入れ替えは、imgタグのsrc属性の値の文字列を置換するシンプルな記述です。

showやhideの表示、非表示のメソッドもサンプルとして実装しています。

以下の画像にマウスを合わせてください。

ウトウト… なんやねん

HTMLこちら

<img class="demo_img" src="http://www.kipure.com/img/demo/cat/010.jpg">

<div class="demo_cmt">
	<span class="cmt1">ウトウト…</span>
	<span class="cmt2">なんやねん</span>
</div>

JSはこちら

$(window).load(function(){
	$('.demo_img').hover(function(){

		$(this).attr('src', $(this).attr('src').replace('010', '011'));

		$(".cmt1").hide();
		$(".cmt2").show();

	}, function(){

		$(this).attr('src', $(this).attr('src').replace('011', '010'));

		$(".cmt1").show();
		$(".cmt2").hide();

	});

});

CSSで少し加工しています。

	.demo_img{
		width: 300px;
		border-radius: 10px;
		margin: 0 auto;
		display: block;
	}
	.demo_cmt{
		text-align: center;
	}
	.cmt2{
		text-align: center;
		display: none;
	}

スマホなどのタップする端末はマウスオーバーしないので、別の処理が必要です。

ちなみにiPhoneでタップすると、hoverと同じ挙動となるようですが、手を離しても元に戻りませんでした。

このサンプルでは、スマホのタップも考慮して、以下のJSを追加しています。

	$('.demo_img').on('touchstart', function(){
		$(this).attr('src', $(this).attr('src').replace('010', '011'));

		$(".cmt1").hide();
		$(".cmt2").show();
		return false;
	});

	$('.demo_img').on('touchend', function(){
		$(this).attr('src', $(this).attr('src').replace('011', '010'));

		$(".cmt1").show();
		$(".cmt2").hide();
		return false;
	});

LINEでシェア

公開 2019-07-30 21:58:07

このページの二次元コード

jQuery マウスオーバーで画像入れ替え

人気のサンプル