サイト制作をする上で、ほぼ100%使用すると言ってもいい程当たり前になっているボタンなどのロールオーバー。
実装する際にはCSS背景画像を利用するものやJavaScriptでマウスオーバー処理をつけるなどさまざま。

そんなマウスオーバー処理をjQueryを使って、
・比較的少ないソース
・CSSを使わない
形式での実装サンプルのご紹介。
(CSSの背景画像を制御して行うのではなく<img>タグを切り替えてロールオーバーを実装する場合のサンプルになります。)

HTMLに記述するソースは

<a href="#"><img src="img/photo01.jpg" width="300" height="225" alt="" /></a>

のみ。

まずは一つ目。
基本的なマウスオーバーで画像を切り替える処理。

用意するものとしてマウスアウト状態で表示する画像を「○○○.jpg」(画像形式はGIFでもPNGでも可)
マウスオーバーで表示する画像を「○○○_ov.jpg」といった命名規則で2枚用意します。
サンプルでは「photo01.jpg」と「photo01_ov.jpg」

先にスクリプトについて。
実装するエリア(<img>)にマウスオーバーした際に画像のファイルパスに「_ov」を加える処理をつけます。

$(function(){
	$("img").hover(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_ov$2"));
	},function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)_ov(\.[a-z]+)$/, "$1$2"));
	});
});

「replace」にて、マウスオーバーした際に現在のファイルパスの最後尾(拡張子前)に「_ov」を追記、
マウスアウトした際に追記した「_ov」を削除、する処理になります。
ここは「_ov」でなくとも任意のファイル名でも可。(その際はマウスオーバーで表示する画像ファイル名も合わせます。)

実際は以下の様に動作します。

ベーシックなロールオーバーになります。

単純に画像を切り替えるだけでは味気ない感じもします。
そこで、せっかくjQueryを使っているのでanimateを利用して少し演出を加えてみると次のように…(HTMLソースは同じ構成。)

$(function(){
	$("img").hover(function(){
		$(this).stop(true , true).animate({opacity:'0.4'}, 500 );
		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_ov$2"));
		$(this).stop(true , true).animate({opacity:'1'}, 400 );
	},function(){
		$(this).stop(true , true).animate({opacity:'0.4'}, 500 );
		$(this).attr("src",$(this).attr("src").replace(/^(.+)_ov(\.[a-z]+)$/, "$1$2"));
		$(this).stop(true , true).animate({opacity:'1'}, 400 );
	});
});

一つのアクションでanimateを2回入れ込む少々強引な方法ですが、
こうすることによって切り替わる瞬間にフェードに近い演出を付けることができます。
(jQuery1.4から追加になった新メソッド「delay」を使えばもっと綺麗にいくのかも。)

実際の動作はこちら。

単純に画像を切り替えるよりかは柔らかい感じになると思います。

最後はマウスオーバーで画像を中央に向かって縮小させて、他の画像を表示する方法。

先に動作のサンプルから。

ボタンのロールオーバーとしては使えないかもしれませんが。。。

スクリプトはこんな感じに。

$(function(){
	$("a").hover(function(){
		$(this).css({width:'300px',height:'225px',display:'block',overflow:'hidden',backgroundImage:'url(img/photo01_ov.jpg)'});
		$(this).children('img').stop(true , true).animate({paddingTop:'113px',paddingLeft:'150px',width:'0',height:'0',opacity:'0.4'}, 400 );
	},function(){
		$(this).children('img').stop(true , true).animate({paddingTop:'0',paddingLeft:'0',width:'300px',height:'225px',opacity:'1'}, 400 );
	});
});

この演出は<img>タグの切り替えだけでは出来そうになかったので
jQuery側で<a>タグに対して背景画像を敷いています。(主旨が変わってきている気もしますが…)
ロールオーバーで大きく演出を掛けたい時などにいかがでしょう。。。
ただ自分がやってみたかっただけという物…

以上、3パターンのjQuery簡単ロールオーバー実装方法でした。
HTMLソースを最小限にすることにこだわってみました。

<img>でのロールオーバーの際に是非。。。

P.S.
早いもので今回でエントリー200件突破。
これからもあれこれ実験していきたいと思います。。。