マウスオーバーで画像を変更するjQueryプラグイン。ex. $('img.button').roll();

jquery.roll.js

(function($) {
	var options = {
		suffix: '_o'
	};

	$.rollSetup = function(o) {
		$.extend(options, o);
	};

	$.fn.roll = function roll() {
		return this.each(function() {
			var src = this.src;
			if (!src) {
				var target = $('img, input[type="button"]', this);
				if (target.length) roll.call(target);
				return;
			}

			var out  = src;
			var over = src.replace(/(\.[^.]+$)/, options.suffix+'$1');
			$('<img src="'+over+'"/>');
			$(this)
				.mouseenter(function() { this.src = over; })
				.mouseleave(function() { this.src = out; });
		});
	};
})(jQuery);