Menu

ロールオーバープラグイン

FOLLOW ME DOWNLOAD

Chapter12で作成した画像のロールオーバーをプラグイン化しています。

オプション
  • suffix : ロールオーバー画像につける接尾語(デフォルト : _hover)

jQuery Code

(function($){
	$.fn.jqueryRollover = function(options){
			
		/* オプションの設定 */
		options = $.extend({
			
			/* ロールオーバー画像につける接尾語 */
			suffix: "_hover"
			
		}, options);
			
		this.each(function(){
			var defaultSrc = $(this).attr("src");
			var hoverSrc = defaultSrc.replace(/^(.+)(\.[a-zA-Z]+)$/, "$1" + options.suffix + "$2");
			$("<img />").attr("src", hoverSrc);
			$(this).hover(function(){
				$(this).attr("src", hoverSrc);
			},
			function(){
				$(this).attr("src", defaultSrc);
			});
		});
		return this;
	}
})(jQuery);
			
			
jQuery(function($) {
	$(".rollover").jqueryRollover({
		suffix: "_on"
	});
});

Chapter 15