jQueryだけで画像のロールオーバーを実装する方法

サンプルコード

function initRollOverImages() {
	var image_cache = new Object();
	$(".rollover a img").not("[@src*='_on.']").each(function(i) {
		var imgsrc = this.src;
		var dot = this.src.lastIndexOf('.');
		var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
		image_cache[this.src] = new Image();
		image_cache[this.src].src = imgsrc_on;
		$(this).hover(
			function() { this.src = imgsrc_on; },
			function() { this.src = imgsrc; }
		);
	});
}
$(document).ready(initRollOverImages);

使い方

3行目で指定した箇所の画像にマウスポインタを当てると、ファイル名に_onが付いてる画像を表示する。マウスポインタを外すと_onが付いていない画像に戻る。

以下に実装までの簡単な流れを。

1. 通常表示する画像 test.jpg とロールオーバーする画像 test_on.jpg を作成
2. jQueryの設定を記述しているファイル(又はHTMLのscript内)に上記コードを挿入
3. コード3行目の .rollover a img をCSSな記法で好きな場所に変える

こんな感じです。あら簡単。

※尚、今回ご紹介した方法は[inputにフォーカスすると消える文字をjQueryで実装する]と同様、他でjQueryを使用してる際の"おまけ"程度に考えて頂ければと思います。

オリジナルと違う点

3行目に .not("[@src*='_on.']") を追加することで、src属性で指定した画像に_onが付いている場合はロールオーバーの処理を実行しないようにしています。これにより、アクティブページなどで初めから_on付きの画像を指定したい時も、IDやCLASSを指定する必要が無くなります。

デモについて

当ブログのアーカイブページで使用されている[Read More]と言う画像は、この方法を使用してロールオーバーしています。

JavaScriptアーカイブ