jQueryでオリジナル画像ロールオーバー処理を実装（フェード版）

前にjQueryを利用した画像ロールオーバーのサンプルコードを紹介しました。

jQueryで画像ロールオーバー

このサンプルでは、画像切り替えがスムーズではなく、瞬時に画像が差し変わるだけです。それでも特に問題はないのですが、今回は一つ手を加えて、徐々に透過させて切り替える、つまり、フェードイン・フェードアウトを利用してふわっと切り替えるように改良してみました。

jQueryのバージョンは1.3.2です。

function AROverImg(classname, prefix, time){
	if(prefix == ''){
		prefix = '_o';
	}
	$("img").each(function(){
		var src = $(this).attr("src");
		if($(this).hasClass(classname) && src.indexOf(prefix + ".") == -1){
			var size = src.length;
			var over = src.substring(0, size - 4) + prefix + src.substring(size - 4, size);
			var par = $(this).parent();
			par.css("display", "block").css("position", "relative");
			var clone = $(this).clone();
			clone.attr("src", over).attr("class", "clone");
			clone.css("position", "absolute").css("top", "0").css("left", "0");
			$(this).after(clone);
			clone.hide();
			par.hover(
				function(){
					$(this).find('.clone').fadeIn(time);
				},
				function(){
					$(this).find('.clone').fadeOut(time);
				}
			);
		}
	});
}

引数のclassnameは対象となるimgタグのクラス名、prefixはロールオーバー画像のプレフィックス、timeは切り替えるアニメーションの時間です。

例えば、これを適用する場合には以下のように記述し、ロールオーバー用の画像「sample_o.jpg」を用意します。時間は1000ミリ秒、つまり1秒かけて切り替えます。

$(document).ready(function(){
	ROverImg('rover', '', 1000);
});

<a href="sample.html"><img class="arover" src="sample.jpg" alt="サンプル" width="100" height="100" /></a>

処理概要としては、対象の画像の上に、cssで絶対配置を指定したロールオーバー画像を重ねます。その上にかぶせた画像をアルファをきかせながら表示させたり、非表示にしたりしているだけです。もちろん、今回の処理ではJSでスタイルを書き換えているので、既存のデザインによってはうまく動作しないこともあるかと思います。

画像を２枚重ねて、上の画像を消しています。もうひとつ、背景画像に入れ込んで、既存画像を消す方法も考えたのですが、どっちがよかったのかな。後者も暇があったら作ってみます。