【jQuery】ロールオーバーで画像を差し替える

マウスが乗った時に画像を変えるには、CSSを使うなど色々な方法がありますが、jQueryを使うと、とてもらくちんです。

javascriptでいいじゃないか

以前はjavascriptを使うとユーザの環境に左右されるという点と、ソースコードの美しさを求めてcssでの画像置換を主に使っていましたが、もはやjavascriptが使えないユーザ環境は考えられませんし、cssを書くのすら面倒くさいダメ人間なので、この方法を使うことが多いです。

画像の準備

通常の画像とマウスホバー時の画像を準備します。
ファイル名を

・sample_off.jpg
・sample_on.jpg

とつけます。
マウスホバー時の画像はoffの部分がonに変わっています。

jQueryの読み込み

jQuery依存のスクリプトなので、head内で読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

GoogleライブラリAPIから読み込んでいます。
バージョンはなるべく新しい方が良いと思います。

javascript

// 画像のプリロード
$(function(){
	$("a img").each(function(){
		if(String($(this).attr("src")).match(/_off\.(.*)$/)){
			var img = new Image();
			img.src = String($(this).attr("src")).replace(/_off\.(.*)$/,"_on.$1");
		}
	});
});

// 画像のロールオーバー
$(function(){
	$('a img').hover(function(){
		$(this).attr('src',$(this).attr('src').replace('_off','_on'));
	},function(){
		$(this).attr('src',$(this).attr('src').replace('_on','_off'));
	});
});

head内に書くなり、外部ファイルにするなりしてください。
javascriptもシンプルです。

名前に「_off」が付くリンクで囲まれた画像がある場合は、「_on」に差し替えた画像をロールオーバーに備え先読みします。
そして「_off」画像の上にマウスカーソルが乗ると、「_on」画像に差し替わります。

class指定もいりません。
ロールオーバーさせたいなら「_off」と「_on」の画像を準備するだけです。