サイト制作をする上で、ほぼ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」といった命名規則で２枚用意します。
サンプルでは「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を２回入れ込む少々強引な方法ですが、
こうすることによって切り替わる瞬間にフェードに近い演出を付けることができます。
（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＞タグに対して背景画像を敷いています。（主旨が変わってきている気もしますが…）
ロールオーバーで大きく演出を掛けたい時などにいかがでしょう。。。
ただ自分がやってみたかっただけという物…
以上、３パターンのjQuery簡単ロールオーバー実装方法でした。
HTMLソースを最小限にすることにこだわってみました。
＜img＞でのロールオーバーの際に是非。。。
P.S.
早いもので今回でエントリー200件突破。
これからもあれこれ実験していきたいと思います。。。