jQueryで簡単なロールオーバーを行うプラグイン(習作)

gistfile1.js

/**
 * jQuery rollover plugin (習作)
 * public domain
 *
 *
 * 使用例:
 *   // 例えば button_off.png をhover時に button_on.png に変更します。
 *   $("img").rollover();
 *   // 例えば button.png をhover時に button_over.png に変更します。
 *   $("img").rollover('', '_over');
 *   $("img").rollover({ off_suffix: '', on_suffix: '_over'});
 */ 
(function($){
  var datakey = 'rollover';;

  $.fn.rollover = function(){
    var options = $.extend({}, $.fn.rollover.defaults);
    switch (arguments.length) {
      case 1:
        $.extend(options, arguments[0]);
        break;
      case 2:
        options.off_suffix = arguments[0];
        options.on_suffix = arguments[1];
        break;
    }

    var on_suffix = options.on_suffix;
    var off_suffix = options.off_suffix;
    var extensions = options.extensions;
    var re_off = new RegExp(off_suffix + '\\.(' + extensions + ')$');

    this
      .filter(function(){
        var src = this.src;
        if (!src.match(re_off)) return false;

        var on_src = src.replace(re_off, on_suffix + '.$1');
        $.data(this, datakey, { on: on_src, off: src });
        $('<img src="' + on_src + '">'); // preload

        return true;
      })
      .hover(
        function(){ this.src = $.data(this, datakey).on },
        function(){ this.src = $.data(this, datakey).off }
      );

    return this;
  };

  $.fn.rollover.defaults = {
    off_suffix: '_off',
    on_suffix : '_on',
    extensions: 'jpe?g|png|gif'
  };
})(jQuery);