[jQuery]ロールオーバー

2018.08.27

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

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

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

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

  <ul>
    <li><a class="rollover_btn" href="#"><img src="img/gNavi_01_off.jpg"></a></li>
    <li><a class="rollover_btn" href="#"><img src="img/gNavi_02_off.jpg"></a></li>
    <li><a class="rollover_btn" href="#"><img src="img/gNavi_03_off.jpg"></a></li>
    <li><a class="rollover_btn" href="#"><img src="img/gNavi_04_off.jpg"></a></li>
    <li><a class="rollover_btn" href="#"><img src="img/gNavi_05_off.jpg"></a></li>
  </ul>

<ul>

</ul>

$(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);
      });
   });
)};