画像のロールオーバー用スクリプト（jQuery）

jQuery/javascript
Posted : 2018.3.28
Update : 2018.3.30

エフェクト無しな、単純なロールオーバー。
末尾に「_off」がついている画像は、「_on」とついている画像にロールオーバー表示されます。

$(function(){
	$("img[src*='_off']").addClass("rollover");
	
	$("img.rollover").each(function(){
			
		//変数設定
		var imgsrc   = $(this).attr("src");
		var imgtype  = imgsrc.slice(-4);
		var imgname  = imgsrc.slice(0,-8);
		var imghover = imgname + "_on" + imgtype;
		
		//プリロード
		$("").attr("src", imghover);
		
		//マウスオーバー/オフ
		$(this).hover(function(){
			$(this).attr("src",imghover);
		},
		function(){
			$(this).attr("src",imgsrc);
		});
	});
});

jQueryを勉強し始めたころに作ったのですが、今でも案件によってはそのまま使っています。

BACK
NEXT