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

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

Contents

mouseenterとmouseleaveを使ってimgのsrc要素を入替えるCSSの記述
mouseenterとmouseleaveを使ってimgのsrc要素を入替えるJavaScriptの記述
mouseenterとmouseleaveを使ってimgのsrc要素を入替えるHTMLの記述
mouseenterとmouseleaveを使ってimgタグのsrcを入れ替えるデモページ

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

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

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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-->