jQueryでイメージのロールオーバーの設定。

2010.02.27 / Notes

jQueryを使ってナビゲーションボタンなどによく使われている、画像のロールオーバー、ロールアウトを設定する方法です。
予め通常時、ロールオーバー時の画像データ2種類を用意します。ファイル名は通常時が「button.png」の場合、ロールオーバー時は「button-over.png」と「-over」を付加しておきます。ともに同じディレクトリに保存します。
HTMLに通常時の画像を配置し、クラスを「over」としておきます。

<img src="button.png" alt="ボタン" class="over" />

1	<img src="button.png" alt="ボタン" class="over" />

次のjQueryを含むJavasScriptを、Head内、外部ファイルなど任意の場所に記述します。

$(function(){
	imageOver();
})

//イメージのロールオーバー設定
function imageOver() {

	//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行
	$("img.over").each(function() {
		
		//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成
		var image = this.src;
		var extension = image.substr(image.lastIndexOf("."), image.length-1);
		var image_over = image.replace(extension, "-over"+extension);
		
		//ロールオーバー用イメージを読み込み
		new Image().src = image_over;
		
		//ロールオーバー、ロールアウト時のイメージURL設定
		$(this).hover(
			function(){this.src = image_over},
			function(){this.src = image}
		);
	});
}

$(function(){

imageOver();

})

//イメージのロールオーバー設定

function imageOver() {

//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行

$("img.over").each(function() {

//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成

var image = this.src;

var extension = image.substr(image.lastIndexOf("."), image.length-1);

var image_over = image.replace(extension, "-over"+extension);

//ロールオーバー用イメージを読み込み

new Image().src = image_over;

//ロールオーバー、ロールアウト時のイメージURL設定

$(this).hover(

function(){this.src = image_over},

function(){this.src = image}

);

});

}

上記のスクリプトでは、HTMLページ内に配置してある「over」クラスを持つイメージ全てに対して、ロールオーバー時に「-over」を付加した画像ファイルに置き換える設定にしてあります。ロールアウトで元の画像に戻します。
スクリプト内でロールオーバー用画像を読み込んでおくことにより、ロールオーバー時に画像の読み込みのため一瞬、間が空くことを防いでいます。