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のような、パラパラアニメーションとなります。

プラグインのダウンロード

どうせなので、ダウンロード出来るようにしておきましたので、以下よりお好きにDLしてご使用ください。
jQueryのバージョンは作成当時の最新バージョンである1.8.1にて動作確認をとっています。

ダウンロード

Ver.1 : jquery.tgImageRollover.zip
Ver.1.1 : jquery.tgImageRollover.zip

参考にしたサイト様

ASCII.jp：40分で覚える！jQuery速習講座
http://ascii.jp/elem/000/000/498/498710/index-2.html

jQuery 日本語リファレンス
http://semooh.jp/jquery/

CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
http://webdesignrecipes.com/jquery-beginners-guide-for-web-design/

jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 | webOpixel
http://www.webopixel.net/javascript/179.html

自作のjQueryスクリプトをプラグイン化しよう | webOpixel
http://www.webopixel.net/javascript/392.html

-Javascript,jQuery
-javascript, jquery, jquery.tgImageRollover, js, rollover, ふんわり, ロールオーバー

: jQueryをGoogle Libraries API から読み込む方法

散々いろんな所で書かれている jQuery のロード方法ですが、何度も調べるのが面倒なので忘備録としてメモっておきます。

: jQueryを使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。

仕事で作ったとあるサイトが、APIを叩いて結果を取得・表示するのですが、APIの反応が悪く、やったらと時間が掛かるので、ローディング画像を出し、ちょっとでも訪問者を待たせる努力をしてみようということで探しました所、「busy.js」というライブラリを発見。

: jQueryでページのロード時に指定のフォームにフォーカスを当ててみる

ログインページなどでページを開いた時に、IDやユーザ名用テキストボックスにフォー ...

: 【JS】ミニロト、ロト6、ロト7番号ジェネレータを作ってみた

以前のポストで作った「ミニロト」番号ジェネレータを拡張して、ロト３種を選択できるようにしたものを作ってみました。

: jQueryでJSON、JSONP 連携してみる。

jQuery の $.ajax() を利用してjson、jsonp形式のデータを ...

PREV: 高画質版「Gロボ体操」「お祭りGロボ」など。
NEXT: 【jQuery】タブの切替スクリプトを作成してみました

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

jQueryでロールオーバー

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

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

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

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

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

プラグインのダウンロード

ダウンロード

参考にしたサイト様

【DIY】2x4や1x4など、SPF材サイズ早見表 (563,572)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (278,405)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (256,025)

【歴史】江戸幕府歴代将軍一覧 (143,287)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (130,127)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (129,522)