jQueryのmouseenter(マウスオーバー)とmouseleave(マウスアウト)を使ってimg(画像)タグのsrc要素を入替える方法をご紹介します。
Contents
ディスプレイ広告
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アナリティクスタグは流用しないで下さい。