はじめての javascript・jQuery - 続々・ロールオーバー画像切替え　jQuery プラグイン編

javascript

前回の はじめての javascript・jQuery - 続・ロールオーバー画像切替え　split(), slice() 編 で出来たものを jQuery プラグインにしてみた。

参考

以下のページを参考にしました。ありがとうございます

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>はじめての javascript・jQuery - 続々・ロールオーバー画像切替え　jQuery プラグイン編</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.rollover.js"></script>
    <script type="text/javascript" src="trigger.js"></script>
  </head>
  <body>
    <ul id="menu">
      <li><a href="/"><img src="img/btn_menu_hoge_over.jpg" alt="ほげ" /></a></li>
      <li><a href="/"><img src="img/btn_menu_fuga.jpg" alt="ふが" /></a></li>
      <li><a href="/"><img src="img/btn_menu_hige.jpg" alt="ひげ" /></a></li>
    </ul>
    <div id="body">
      （略）
    </div>
  </body>
</html>

前回とほぼ同じ内容です。
メニュー（<ul id="menu">）の画像をマウスオーバー、マウスアウトで切り替わるようにします。画像のファイル名は以下の様に、通常時のファイル名に何がしかの接尾語（この場合「_over」）をつけたものにします。

  • 通常（マウスアウト）：***.jpg
  • マウスオーバー：***_over.jpg

勿論、画像形式は jpeg 以外でも大丈夫です。接尾語も適当なものを使用できますが、画像の src 属性値に同じ文字列が無い様にする必要があります。
head 要素内で jQuery 本体（jquery.js）と、今回つくる jQuery プラグイン（jquery.rollover.js）、そして、プラグインの関数？を呼び出すためのスクリプト（trigger.js）を読み込んでいます。プラグインと呼び出し用、それぞれの内容は以下の通りです。

jQuery プラグイン（jquery.rollover.js）

jQuery.fn.rollover = function(settings){
  settings = jQuery.extend({
    suffix: "_over"  //画像ファイル名につける接尾語の初期設定値
  }, settings);
  return this.each(function(){
    var default_img = $(this).attr("src");
    if (!default_img.match((settings.suffix))) {
      var point = default_img.lastIndexOf(".");
      var mouseover_img = default_img.slice(0, point) + settings.suffix + default_img.slice(point);
      var preload_img = new Image();
      preload_img.src = mouseover_img;
      $(this).hover(
        function(){
          $(this).attr("src", mouseover_img);
        },
        function(){
          $(this).attr("src", default_img);
        }
      );
    };
  });
};

3行目（suffix: "_over"）はマウスオーバー用の画像ファイル名につける接尾語の初期設定値です。
別の文字列、例えば「_on」等を使用したい場合は、この値を変更して下さい。もしくは、以下の呼び出し用スクリプト内で変更することも可能です。初期設定はそのままで別の文字列を使いたいなどの場合にはその方が良いかもしれません。

呼び出し用スクリプト（trigger.js）

$(document).ready(function(){
  $("#menu img").rollover(); //接尾語は初期設定値のまま
});

対象の要素（$("#menu img")）にプラグインの関数（jQuery.fn.rollover）をつけるだけです。***_on.jpg の様に、画像ファイル名の接尾語を _over に変更する場合は以下のようにします。

$(document).ready(function(){
  $("#menu img").rollover({suffix: "_on"}); //接尾語を別の文字列（_on）にする
});

以上です。

おわりに

前回書き忘れたましたが、当初の目論見通り、内容の html、振る舞いの javascript と、しっかり分離することが出来たのがうれしい。画像ファイル名にも幅を持たせることが出来たと思っています。
やはり、html の制作を主にしている職業柄（もしくは、原理主義的？）、見た目や振る舞いの為だけの要素や属性等は出来るだけ排除したいものですから。制作効率やメンテナンス性も高くなると思いますし。

ついでに

当初、色々な web ページを読みながら見よう見まねでやった際にはなかなかうまくいかず、何が悪いのかも分かりませんでした。しかし、jQuery 配布元のドキュメント を読みながら一つ一つ順番に変更していくことで自分でも驚くぐらいあっさりと動作させることができました。
よく理解していないのは今も変わらずですが、コードのコピー＆ペーストで楽をするだけじゃなく、基本情報を基に地道にやっていくのも有効な手段だと改めて感じました。
それから、そもそものつくり始めるきっかけが「意外にも jQuery に rollover のプラグインねーよ」だったんですが実はあった。しかも多機能っぽい？。どこを探してたんだろーか。とりあえず javascript、jQuery 使う丁度良いきっかけとゆーことで由とした。