jQuery【ロールオーバー】解説

カテゴリー︎： 【JavaScript】・【jQuery】

jQueryでロールオーバーするメモ

cssでロールオーバーするのは非常に簡単だけど

あえて、jQuery勉強のため、コメントを記述

<body>
  <style>
    img {
      width: 20%;
    }
  </style>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <h1>webデザイナーのjQuery【ロールオーバー】</h1>
      <button id="btn">マウスオーバーbtnテスト</button>
      <script>
        var btn = $('#btn');
        btn.hover(function(){
          
        });
      </script>
  <ul>
    <li><a href="#" class="rollover"><img src="img_off.png"></a></li>
    <!-- <li><a href="#" class="rollover"><img src="img_on.png"></a></li> -->
  </ul>
  <script>
  $(function(){
    $('.rollover').each(function(){
     //eachの中では、「this」にそれぞれの要素が入っている
     //イベントハンドラの中の「this」にはイベントが発生した要素が格納される
     //「this」を使う理由は、全部にIDを振ってひとつひとつに処理をかななければならないので「this」を使用
     var a = $(this);//aという変数をjQueryオブジェクト化する
     //console.log(a);
     var img = a.find('img');//img要素を探して変数imgに格納する
     console.log('attrで変更前⇒'+img);
     //attr()は、要素の属性値を変更するメソッドjQueryObject.attr('属性名','変更後の値');
     var src_off = img.attr('src');//ページに配置されているimg要素を取得してsrc属性に変更
     console.log('attrで変更後⇒'+src_off);//img_off.pngを取得して変数src_offに格納する
     var src_on = src_off.replace('_off','_on');//javascriptの機能で_offを_onに置換する(ロールオーバー時のパスを作る);　
     console.log(src_on);//img_on.pngに変更してある

     $('<img />').attr('src', src_on);//このコードは、ロールオーバー状態の画像パスを指定（ちらつき防止のため）

     a.hover(function(){
      img.attr('src', src_on);//a要素にマウスがのったら、画像のsrc属性を「ロールオーバー時」のものに変更する
     },function(){
      img.attr('src', src_off);//a要素からマウスがおりたら、画像のsrc属性を「通常時」のものに変更する
     });
    });
  });
  </script>
</body>
PAGE TOP