jQueryでロールオーバーのスクリプトを組んでみた

2012/09/10 2018/09/10

ちょっと仕事の状況が落ち着いたので、以前より興味のあったjQueryを真面目にやってみようということで、色々と試しておりました。
で、まずは「何か使えるものを作ってみよう」ということで、マウスオーバーしたら画像が入れ替わるスクリプトを組んでみました。
最終的に作りたかったのは、マウスオーバーで画像を切り替える際にパラパラさせるのではなく、フェードイン、フェードアウトをしながらふんわり変化するスクリプト。通称、ふんわりロールオーバー。

そこに行きつくために経た段階通りに記事を書いてみましたので、「jQueryなんてよくわからないよ！」なんて方もひと通り読んでみれば少しは理解できるかもです。
toogie自身も javascript は苦手でしたが、徐々にですが理解できてきています。眺めるだけでなく書くことは大切ですね、やはり。
あとは慣れ。
習うより慣れろとはよく言ったものですね･･･。

jQueryでロールオーバー

スクリプト1 パラパラロールオーバー

んでは基本的なものから。

<html>
<head>
<title>RollOver</title>
<script src="../lib/jquery1.8.1.min.js"></script>
</head>
<body>
<ul id="nav">
  <li><a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50" /></a></li>
  <li><a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50" /></a></li>
</ul>
</body>
</html>

<html>

<head>

<title>RollOver</title>

</head>

<body>

</ul>

</body>

</html>

<script type="text/javascript">
  $(function(){
    $('img.rollover').hover(
      function(){
        $(this).attr('src', $(this).attr('src').replace('.png', '_on.png'));  //←(1)
      },
      function(){
        $(this).attr('src', $(this).attr('src').replace('_on.png', '.png'));  //←(2)
      }
    ).each(function(){
      $("<img>").attr('src', $(this).attr('src').replace('.png', '_on.png'));  //←(3)
    })
  });
</script>

$(function(){

$('img.rollover').hover(

function(){

$(this).attr('src', $(this).attr('src').replace('.png', '_on.png')); //←(1)

function(){

$(this).attr('src', $(this).attr('src').replace('_on.png', '.png')); //←(2)

}

).each(function(){

$("<img>").attr('src', $(this).attr('src').replace('.png', '_on.png')); //←(3)

})

});

</script>

やっていることは、img タグのクラス名が rollover の画像（＝セレクタが rollover）を対象とし、マウスカーソルがそれら対象画像(nav01.png / nav02.png)に乗った時（hover時）に、ON用の画像(nav01_on.png / nav02_on.png)へ表示を切り替えています。
アニメーション（フェードイン・フェードアウト）はせず、パラパラとロールオーバーさせているだけです。

(1)は、マウスカーソルが乗った時の処理で、ファイル名を replace で「.png」→「_on.png」と変更。

同様に(2)は、(1)とは逆に「_on.png」→「.png」を行なっています。

(3)は大量の画像に対し class="rollover" が指定されている場合に画面がちらつく恐れがあるので、先読み込みを行なっている処理です。
「セレクター」が理解できれば、すぐに何をやっているか分かる内容ですね。
といっても、あんまり JavaScript が得意じゃない私には理解するのに時間がかかりました。

スクリプト2 若干、ふんわりと変化

では次に進みます。
パラパラ変わるだけでは面白く無いので、フェードイン・フェードアウトを使ってふんわり変化するロールオーバーに挑戦してみました。
HTMLは同じものとします。

<script type="text/javascript">
$(function(){
  $('img.rollover').hover(
    function(){
      $(this).stop().animate({'opacity':'0.5'}, 100); //←(1)
      $(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2")); //←(2)
      $(this).stop(true, true).animate({opacity:'1'}, 400 ); //←(3)
    },
    function(){
      $(this).stop().animate({'opacity':'0.5'}, 100); //←(4)
      $(this).attr('src', $(this).attr('src').replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); //←(5)
      $(this).stop(true, true).animate({opacity:'1'}, 400 ); //←(6)
    }
  ).each(function(){
    $("<img>").attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2"));
  });
});
</script>

$(function(){

$('img.rollover').hover(

function(){

$(this).stop().animate({'opacity':'0.5'}, 100); //←(1)

$(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2")); //←(2)

$(this).stop(true, true).animate({opacity:'1'}, 400 ); //←(3)

function(){

$(this).stop().animate({'opacity':'0.5'}, 100); //←(4)

$(this).attr('src', $(this).attr('src').replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); //←(5)

$(this).stop(true, true).animate({opacity:'1'}, 400 ); //←(6)

}

).each(function(){

$("<img>").attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2"));

});

</script>

反則気味ですが、カーソルON、OFF時にそれぞれ３つの処理を行い、擬似的なふんわりロールオーバーを行なっています。
.stop() はカーソルを素早く動かされた場合に処理が残ってしまい、アニメーションが止まらないのを防ぐ記述です。
「ちょっと難しいことでもしよう」ということで正規表現を使ってファイル名書き換えています。

カーソルON時：
　(1) OFF用画像(nav01.png)の不透明度を50％まで落とす
　(2) 正規表現を使い、ON用画像のファイル名に画像を変更
　(3) 不透明度を100％まで回復させ、ON用画像を表示させる

カーソルOFF時：
　(4) ON用画像(nav01_on.png)の不透明度を50％まで落とす
　(5) 正規表現を使い、OFF用画像のファイル名に画像を変更
　(6) 不透明度を100％まで回復させ、OFF用画像を表示させる

といったことを行なっています。

これはこれで結構目からウロコが落ちた考え方だったのですが、なんだか不満が残る結果でしたので、もうちょっと頑張ってみました。

スクリプト3 失敗ロールオーバー

<script type="text/javascript">
$(function(){
  $('img.rollover').hover(
    function(){
      $(this).attr('src', $(this).stop().animate({'opacity': '1'}, 500).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2"));
    },
    function(){
      $(this).attr('src', $(this).stop().animate({'opacity': '0'}, 500).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2"));
    }
  )
});
</script>

$(function(){

$('img.rollover').hover(

function(){

$(this).attr('src', $(this).stop().animate({'opacity': '1'}, 500).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2"));

function(){

$(this).attr('src', $(this).stop().animate({'opacity': '0'}, 500).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2"));

}

)

});

</script>

次に書いたのが上記スクリプトだったのですが、カーソルON時に画像は変更するのですが、OFF時に消えてなくなるという、完全に意図しない動きでした。
これじゃダメだと、ボタン画像を背景にして配置したりなど色々と考えたのですがうまく出来ず、色々と考えた結果、『素の状態でON画像を position:absolute、opacity:0 としてOFF画像の上にを重ね、マウスオーバーで opacity を 1 に変更するという動き』ではどうだということで四苦八苦。

結果、出来上がったスクリプトが以下のスクリプト4。

スクリプト4 ふんわりロールオーバー（完成形）

<script type="text/javascript">
$(function(){
  $('img.rollover').each(
    function(){
      this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2");
      this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;" />');
      $(this).before(this.onHtml);

      $(this.onHtml).hover(
        function(){
          $(this).stop().animate({'opacity': '1'}, 600);
        },
        function(){
          $(this).stop().animate({'opacity': '0'}, 400);
        }
      )
    }
  )
});
</script>

$(function(){

$('img.rollover').each(

function(){

this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2");

this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;" />');

$(this).before(this.onHtml);

$(this.onHtml).hover(

function(){

$(this).stop().animate({'opacity': '1'}, 600);

function(){

$(this).stop().animate({'opacity': '0'}, 400);

}

)

}

)

});

</script>

ページ内の class="rollover" 画像に対し each文で順次 styleに position:absolute 及び opacity:0 を設定した onHtml（IMGタグ）を作成し、ボタン画像の直前に挿入。その onHtml にマウスオーバーした時に、アニメーションでopacity を 1 に切り替える、という処理を行なっています。

ポイントは挿入する IMGタグの positionをabsolute にする所。

これで、ON画像とOFF画像と同じ座標に持ってくる事が可能となります。
このルーチンでページ内にある全ての class="rollover" 画像がロールオーバーの対象となり、良い感じなスクリプトとなりました。

スクリプト5 ふんわりロールオーバープラグイン化

スクリプト4をさらに使えるものとすべく、プラグイン化し外部ファイル（ファイル名：jquery.tgImageRollover.js）として呼べるようにしてみます。
同時に、セレクタやファイル名末尾句、フェード時間などもHTML側から設定できるようにもしてみます。

index.html

<html>
<head>
<script src="../lib/jquery1.8.1.min.js"></script>
<script src="../js/jquery.tgImageRollover.js"></script>
<script type="text/javascript">
  jQuery(function(){
    $(this).tgImageRollover({
      selector : 'img.rollover',     // セレクタ ←(7)
      attach : '_on',                // ファイル名末尾句 ←(8)
      onFadeTime : 600,              // カーソルON時のアニメーション時間 ←(9)
      offFadeTime : 400              // カーソルOFF時のアニメーション時間 ←(10)
    });
  });
</script>
</head>
<body>
  <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50" /></a>
  <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50" /></a>
</body>
</html>

<html>

<head>

jQuery(function(){

$(this).tgImageRollover({

selector : 'img.rollover', // セレクタ ←(7)

attach : '_on', // ファイル名末尾句 ←(8)

onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9)

offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10)

});

</script>

</head>

<body>

</body>

</html>

jquery.tgImageRollover.js

;(function($){
  $.fn.tgImageRollover = function(options){

    var opts = $.extend({}, $.fn.tgImageRollover.defaults, options);

    $(opts.selector).each(
      function(){
        this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2");
        this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;" />');
        $(this).before(this.onHtml);

        $(this.onHtml).hover(
          function(){
            $(this).stop().animate({'opacity': '1'}, opts.onFadeTime);
          },
          function(){
            $(this).stop().animate({'opacity': '0'}, opts.offFadeTime);
          }
        )
      }
    )
  }

  // default option
  $.fn.tgImageRollover.defaults = {
    selector : 'img.rollover',
    attach : '_on',
    onFadeTime : 600,
    offFadeTime : 400,
  };
})(jQuery);

;(function($){

$.fn.tgImageRollover = function(options){

var opts = $.extend({}, $.fn.tgImageRollover.defaults, options);

$(opts.selector).each(

function(){

this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2");

this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;" />');

$(this).before(this.onHtml);

$(this.onHtml).hover(

function(){

$(this).stop().animate({'opacity': '1'}, opts.onFadeTime);

function(){

$(this).stop().animate({'opacity': '0'}, opts.offFadeTime);

}

)

}

)

}

// default option

$.fn.tgImageRollover.defaults = {

selector : 'img.rollover',

attach : '_on',

onFadeTime : 600,

offFadeTime : 400,

};

})(jQuery);

最終的には以上のようになり、４項目の設定が可能になるなど、ひとまずは満足な出来となりました。

HTMLファイルで以下の項目が設定可能です。
　●セレクタ名
　●ファイル名末尾句
　●カーソルON時のアニメーション時間
　●カーソルOFF時のアニメーション時間

【セレクタ名】
ロールオーバーさせたい画像のクラス名を rollover 以外としたい場合、(7)で設定したクラス名を対象とすることが可能。
例： class="ro"　など

【ファイル名末尾句】
マウスオーバー時に差し替える画像ファイル名の末尾句を _on 以外としたい場合、(8)で設定可能。
末尾句を _ov とする場合は画像ファイル名を「button_ov.png」とします。

【カーソルON時のアニメーション時間 / カーソルOFF時のアニメーション時間】
マウスオーバー時のフェードイン・フェードアウトの時間を調整可能。
(9)を大きい数字にすればするほど、ゆっくりアニメーションするようになります。
逆に 0 にすると、スクリプト1のような、パラパラアニメーションとなります。