マウスオーバー（mouseenter）とマウスアウト（mouseleave）を使ってimgタグのsrc要素を入れ替え表示

jQueryのmouseenterとmouseleaveを使って画像タグのsrc要素を入替え表示してみます。

1．CSSの記述例

以下は任意です。

<style>
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
.clMouseArea{
	width:150px;
	margin:0 auto;
	border:solid 1px #CCCCCC;
	cursor:pointer;
}
</style>

2．読込むJsファイルとJavaScriptの記述例

<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>

3．HTMLの記述例

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

<!--/clMouseArea-->

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