[mootools] ロールオーバープラグイン

ロールオーバースクリプト（画像名のOn/Offで判別）とマウスオーバーでリンク画像の透明度とか変更を足してクラスにしてみた。

指定エリア以下のaタグ拾ってマウスイベントでロールオーバーする。
画像名に指定した文字列があれば置換、なければ透過処理。
ロールオーバーさせない指定はclass名の有無（imgタグ内）で判断する。

Domready

new wtnRollover({area:"#fontsize"});
new wtnRollover({area:"#main"});

ドル関数は不用で、オプションのareaにID等を指定すること。

Class

var wtnRollover = new Class({
	Implements: [Options],
	options: {
		area:"body",
		over:"_on",
		off:"_off",
		duration:300
	},
	initialize: function(options) {
		this.setOptions(options);
		this.overTxt = this.options.over;
		this.offTxt = this.options.off;
		this.imgs =  $$(this.options.area + " a img");
		if(this.imgs) this.Roll();
		return true;
	},
	Roll:function(){
		var self = this;
		self.imgs.each(function(img,index){
			if($type(img)=="element"&& !img.hasClass("rollskip")){
				img.set("tween",{duration: self.options.duration});
				img.addEvents({
					"mouseover":function(){
						if(img.src.indexOf(self.offTxt) === -1)
							img.tween("opacity",0.5);
						else
							img.src = img.src.replace(self.offTxt,self.overTxt);
						},
					 "mouseleave":function(){
						if(img.src.indexOf(self.overTxt) === -1 )
							img.tween("opacity",1);
						else
							img.src = img.src.replace(self.overTxt,self.offTxt);
					 }
				});
			}
		});
	}
});

オプションにduration追加した

thisを変数に格納するとbind(this)しなくてもいいよ、っていう例。