ロールオーバープラグイン
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"
});
});