- 2008-07-24 (木) 11:06
- Javascript
マウスオーバーの画像作るのﾒﾝﾄﾞｸｾｰと思ったときに、画像１枚でごまかせるから便利。
普通のロールオーバーよりも凝ったことも出来るので手抜きに見えない所が良いですｗ
難点はjavascriptオフで効果がなくなることですが、
javascriptを意識的にオフしてる人というのは限られてるので大丈夫だと思います。
prototype＆script.aculo.us、jQuery、mootoolsでそれぞれ書いてみた。
prototype（1.6）＆script.aculo.us
王道の組み合わせ。（prototype.js、scriptaculous.js、effects.jsが必要。）
透明度変更のエフェクトはscript.aculo.usがやってるので、他の効果にしたい場合は
script.aculo.usのリファレンスを参考に。
JavaScript:
-
$$('a img').each(function(el){
-
el.observe('mouseover',function(){
-
new Effect.Opacity(el, { from: 1, to: 0.7,duration: 0.5 });
-
});
-
el.observe('mouseout',function(){
-
new Effect.Opacity(el, { from: 0.7, to:1,duration: 0.5 });
-
});
-
-
});
mootools(1.2)
1.1から大分中身変わってますが、特にFxの変更が大きいかも。
Fx.StyleがFx.Tweenになってたり、Fx.Slideがプラグイン化されてたりするので
1.1で使ってたソースが動かないって事も多いのでは。
element.set('tween'[,options]);で直接要素にトランジションとか設定できるようになった。
fade()、tween()、highlight()で直接エフェクトの設定が出来る。
JavaScript:
-
$$("a img").addEvent('mouseover',function(){
-
//this.set('tween', {duration: '500'});
-
this.fade(0.7);
-
});
-
$$("a img").addEvent('mouseout',function(){
-
//this.set('tween', {duration: '500'});
-
this.fade(1);
-
});
jQuery(1.2.6)
hover(func1, func2)はマウスオーバー／アウト時の処理を行う関数。
thisを$()に入れるのがポイントだろうか
JavaScript:
-
$('a img').hover(
-
function(){
-
$(this).fadeTo(500,0.7);
-
},
-
function(){
-
$(this).fadeTo(500,1);
-
}
-
);
