jQueryでオンマウス画像のエフェクトをつける
2012.10.03
画像ボタン・画像メニューのマウスオン・オフでいちいち2種類の画像を作るのは大変です。そんな場合、jQueryのfadeエフェクトを利用すると簡易にオンマウス効果を付けることが出来ます。
jQueryを読み込んだ後、
[sourcecode language="plain"]
$(function(){
$(".onimg").hover(
function(){
$(this).fadeTo(100,0.6);
// 100 -> フェードの速度, 0.6 -> 明度 です。エフェクトを変えたければ数値を調整して下さい。
},
function(){
$(this).fadeTo(100,1);
}
);
});
[/sourcecode]
というJavascriptを記載します。onimg というのがクラス名で、
[sourcecode language="plain"]
<a href="/"><img src="home.jpg" alt="HOME" class="onimg" /></a>
[/sourcecode]
という感じで、イメージにクラスをつけると、オンマウスの時に画像にフェード効果がかかります。
カテゴリー:技術情報メモ