- 2009-03-23 (月) 15:30
- MooTools
ロールオーバースクリプト（画像名のOn/Offで判別）とマウスオーバーでリンク画像の透明度とか変更を足してクラスにしてみた。
指定エリア以下のaタグ拾ってマウスイベントでロールオーバーする。
画像名に指定した文字列があれば置換、なければ透過処理。
ロールオーバーさせない指定はclass名の有無（imgタグ内）で判断する。
Domready
JavaScript:
-
new wtnRollover({area:"#fontsize"});
-
new wtnRollover({area:"#main"});
ドル関数は不用で、オプションのareaにID等を指定すること。
Class
JavaScript:
-
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)しなくてもいいよ、っていう例。
