jqueryでロールオーバー（マウスで触ったときに画像が変わる）する方法

ボタンを触ったときに画像を変更させるロールオーバーは良く使いますよね。
jqueryを使っての簡単ロールオーバーする方法を紹介します。

初級編

1個だけ、ロールオーバーできれば、いい場合

jquery

$(function(){
 $("img[src=’img/button.gif’]").mouseover(function(){
 $(this).attr("src","img/button_on.gif");
 }).mouseout(function(){
 $(this).attr("src","img/button.gif");
 });
});

解説

$("img[src='img/button.gif']").mouseover

画像を$(“img[src=’img/button.gif’]”)で選択して、
mouseoverでマウスが画像の上にのったときに下記のイベントが実行されます。

(function(){
 $(this).attr("src","img/button_on.gif");
 })

$(this)で触っている画像を選択して、
.attr(“src”,”img/button_on.gif”)は.attr(“属性名”,”変更する属性値”)なので
画像のURLをbutton.gif→button_on.gifに書き換えます。

.mouseout(function(){
 $(this).attr("src","img/button.gif");
 });

.mouseoutでマウスが画像から離れたときに
画像のURLがbutton_on.gif→button.gifに書き換えられます。

中級編

セレクターで選んだ画像全てに適応できて、_onがついている画像とない画像を用意すれば、すべてロールオーバーが行われます。

jquery

$(function(){
	$('a img').not('[src*="'+ '_on' +'."]').each(function() {
		var src = $(this).attr('src');
                var src_on = src.substr(0, src.lastIndexOf('.')) 
		 + '_on'
		 + src.substr(src.lastIndexOf('.'));　
		$(this).hover(
			function() {
				$(this).attr('src', src_on);
			},
			function() {
				$(this).attr('src', src);
			}
		);
	});
});

解説

$('a img').not('[src*="'+ '_on' +'."]').each(function() {

$(‘a img’)→リンクがある画像で
.not(‘[src*=”‘+ ‘_on’ +’.”]’→URLに_onがついていない
.each→ホームページ内にあるリンクがある画像一つ一つに、それいこうのfunctionを行う

様は_onがついていないリンクがある画像それぞれにfunction以下のjqueryを実行します。
※セレクターはリンクがある画像全てに実行されるようにしているので。
使うときは、jqueryの動く範囲を狭めて使ってください。例：（#nav a img）

var src = $(this).attr('src');

attr(属性)で属性の値を取得します。
画像のURLを取得して、srcに代入しています。

var src_on = src.substr(0, src.lastIndexOf('.')) 
		           + '_on'
		           + src.substr(src.lastIndexOf('.'));　

substr(0,?)は?の前までの文字を取得、substr(?)は?よりあとの文字を取得します。
lastIndexOf(値)は後ろから検索して、値の文字列が前から何番目かの値を表示します。

例：img.jpgの場合、
i=0,
m=1,
g=2,
.=3なので
lastIndexOf(‘.’)=3
substr(0,3)=img

ここでは、
src.substr(0,src.lastIndexOf(‘.’))で画像の『.』より前のURLを読み込み
_onをつけて
src.substr(src.lastIndexOf(‘.’))で『.』より後の値を読み込みsrc_onに値を入れています。
様するに例でいうと、
src.substr(0, src.lastIndexOf(‘.’)) + ‘_on’ + src.substr(src.lastIndexOf(‘.’))=img_on.jpg

$(this).hover(
			function() {
				$(this).attr('src', src_on);
			},
			function() {
				$(this).attr('src', src);
			}
		);

.hover(さわったとき,はなれたとき)に実行、
attr(‘属性’,値)は属性をその値に変更します。
そのため、
さわったときに、イメージ画像の属性値をsrc_onの値に変更。
はなれたときに、イメージ画像の属性値をsrcの値に変更しています。