自作ロールオーバーのjsを作ってみた

カテゴリー:javascript

最近jsの勉強を続けてるMaMoTaKuです〜
今回はよく使うロールオーバーのjsを作ってみました笑
本当に必要最低限のことしか書いてません笑
しかもネットで探せば落ちてそうなものをあたかも過ごそうに紹介します笑

これだけだよでロールオーバー出来ちゃうんです!

$(document).ready(function(){
	$(".rollover img").hover(function(){
		$(this).attr("src", $(this).attr("src").replace('_off', '_on'));
	}, function(){
		$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
	});
});

使い方は
・imgを囲ってるタグにクラスで「rollover」をつける
・imgの名前の最後に「_off」と「_on」がついた2種類を用意する

至って普通のロールオーバーのjsと同じですよね!?
いや〜
勉強したかいがあるもんだよ〜笑

8月6日追伸

hoverってあまり使わない方がいいぽいっすね、、、
書き直すとしたら

$(document).ready(function(){
	var rolloverImg = $(".rollover img");
	rolloverImg.bind("mouseover" , function(){ rolloverImg.attr("src", rolloverImg.attr("src").replace('_off', '_on')); });
	rolloverImg.bind("mouseout"  , function(){ rolloverImg.attr('src', rolloverImg.attr('src').replace('_on', '_off')); });
});

みたいな感じの方がいいぽいな〜