IT Rescue IT関連Tips情報

jQueryでオンマウス画像のエフェクトをつける

2012年10月3日javascript

画像ボタン・画像メニューのマウスオン・オフでいちいち2種類の画像を作るのは大変です。そんな場合、jQueryのfadeエフェクトを利用すると簡易にオンマウス効果を付けることが出来ます。

jQueryを読み込んだ後、

$(function(){
 $(".onimg").hover(
  function(){
    $(this).fadeTo(100,0.6);
    // 100 -> フェードの速度, 0.6 -> 明度 です。エフェクトを変えたければ数値を調整して下さい。
  },
  function(){
   $(this).fadeTo(100,1);
  }
);
});

というJavascriptを記載します。onimg というのがクラス名で、

<a href="/"><img src="home.jpg" alt="HOME" class="onimg" /></a>

という感じで、イメージにクラスをつけると、オンマウスの時に画像にフェード効果がかかります。


コメントをどうぞ

免責事項

著作権者の文書による承諾を得ずに、本サイトの内容の一部、全部を無断で複写、複製、転載することは、禁じられています。
また、当ウェブサイト に記載された情報の完全性・正確性に対して一切の保証を与えるものではありません。当ウェブサイトに含まれる情報もしくは内容を利用することで直接・間接的に生じた損失に関し一切責任を負わないものとします。