[jQuery]ロールオーバー

画像を使ったロールオーバーはグローバルナビやお問い合わせのボタンなどWEBサイトの様々なところで使用されることが多いものです。

できれば、cssで背景の変更などではなく、jQueryで一括で定義できるようにすれば、楽ですし、後々の管理が楽になります。

以下が、jQueryを使ったロールオーバーの記述です。

用意する画像は末尾に_offと_onを記述したロールオーバー前と後の画像を用意します。
1,gNavi_01_off.jpg
2,gNavi_01_on.jpg

$(function(){
   $('.rollover_btn').each(function(){
      var img = $(this).find('img');  
      var off = img.attr('src');
      var on = off.replace('off','on');

      $(this).hover(function(){
           img.atter('src',on);
      }),function(){}
           img.atter('src',off);
      });
   });
)};

jQueryで画像をホバーしたときに、画像のソースを変更してonとoffの切り替えを行っています。

ソース上のでは、jsの記述とaタグにクラス「rollover_btn」を付与するだけで、実装できるのでcssよりも便利なのではないでしょうか。