JavaScript PR

mouseenterとmouseleaveを使ってimgのsrc要素を入替える【jQuery】

記事内に商品プロモーションを含む場合があります

jQueryのmouseenter(マウスオーバー)とmouseleave(マウスアウト)を使ってimg(画像)タグのsrc要素を入替える方法をご紹介します。

mouseenterとmouseleaveを使ってimgのsrc要素を入替えるCSSの記述

※マウスオーバー・マウスアウトエリア(.clMouseArea)のCSS記述です。必要に応じて変更して下さい。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
.clMouseArea{
	width:150px;
	margin:0 auto;
	border:solid 1px #CCCCCC;
	cursor:pointer;
}
</style>

mouseenterとmouseleaveを使ってimgのsrc要素を入替えるJavaScriptの記述

※jquery.min.js(v1.7.1)ファイルを読み込みます。マウスオーバー・マウスアウトエリア(.clMouseArea)にmmouseenter(マウスオーバー)とmouseleave(マウスアウト)時の処理、.attr()を使ってsrc画像の入替えを行います。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".clMouseArea").live({
		mouseenter:function(){
			$(".clMouseArea img").hide().attr('src','mouseenter.jpg').fadeIn(500);
		},
		mouseleave:function(){
			$(".clMouseArea img").hide().attr('src','mouseleave.jpg').fadeIn(500);
		}
	});
});
</script>

mouseenterとmouseleaveを使ってimgのsrc要素を入替えるHTMLの記述

※マウスオーバー・マウスアウトエリアclass=”clMouseArea”にjpg画像(imgタグ)を用意します。必要に応じて変更して下さい。

<div class="clWrap">
    <h1>以下の「no mouse」画像をマウスオーバー(mouseenter)・マウスアウト(mouseleave)で画像が切り替わります。</h1>

	<div class="clMouseArea">
    <img src="nomouse.jpg" width="150" height="150" alt="マウスオーバーするエリアの画像" />
    </div><!--/clMouseArea-->

</div><!--/clWrap-->

mouseenterとmouseleaveを使ってimgタグのsrcを入れ替えるデモページ

mouseenterとmouseleaveを使ってimgタグのsrcを入れ替えるデモ

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。