jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.11. 7

単純なマウスオン効果を実装する

Category:

サイトを作る際に必ず実装する画像ボタンなどのマウスオン効果ですが、以前のソースから毎度流用するのも面倒なので、自分がいつも使っているものをメモ代わりに残しておきます。いずれもjqueryに頼っています。

特にアニメやフェード効果もなく、画像を切替えるだけのものはこちら。

function hover(e){
	$(e).mouseover(function(){
		$(this).attr('src',$(this).attr('src').replace(/^(.+)(\..+)$/,'$1_ov$2'));
	}).mouseleave(function(){
		$(this).attr('src',$(this).attr('src').replace(/^(.+)_ov(\..+)$/, '$1$2'));
	});
}

hover('.btn');

指定したclassをfadeToで透過させるのはこちら。

$(".btn").mouseover(function(){
	$(this).stop().fadeTo(200, 0.5);
}).mouseleave(function(){
	$(this).stop().fadeTo(200, 1);
});

マウスオン効果用の画像をいちいち作成しない場合などは、後者で対応することが多いです

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.