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>


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


コメントを残す




Menu

HOME

 TOP