jQueryでマウスオーバー時に画像変更

よくあるマウスオーバー時の画像変更になります。

まずは対象の画像を準備。

/image/sample_off.jpg
/image/sample_on.jpg

そしていつも通りjQueryの読み込み。

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
</script>

jQuery側のソースはこちら。

<script language="javascript">
$(function(){
$(".imageOver img").hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
}
});
});
</script>

HTML側のソースはこちら。

<a href="">
<div class="imageOver">
<img src="/image/sample_off.jpg" width="200" height="60" />
</div>
</a>

これで簡単に画像変更できますね。