サイト制作をする上で、ほぼ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件突破。
これからもあれこれ実験していきたいと思います。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで簡単ロールオーバー

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR