ロールオーバーについて

画像をロールオーバーさせる際、いろんな方法がありますよね。
ｃｓｓや、ｊｓなどを使って実現させたり・・。
今回は、その中で私が主に使っている方法を紹介させていただきます。


ｃｓｓとｊｓそれぞれ２つずつ。
まずはｃｓｓから。

ｃｓｓでロールオーバー

ｃｓｓでロールオーバーを実現させるには、
基本的にどちらも画像を”背景画像”として表示させます。
そして、　通常時　と　:hover時　の状態をそれぞれ指定し、ロールオーバーさせます。

・１枚の画像でロールオーバー

これは私もよく使いますが、 読み込む画像が一枚分で済むので読み込み時間も短くスッキリできます。
用意する画像を一つにするための手間は若干かかりますが(大した手間でもないですがｗ)、割と使いやすいかと思います。

用意する画像はこれ。

btn_01

このように通常時と:hover時の画像を一つにします。
そして、初めに記述したようにｃｓｓで通常時と:hover時の表示方法(状態？)をそれぞれ指定します。

=html=

<a class="btn01" title="cssでの01ボタン" href="#">cssでの01ボタン</a>

htmlではテキストリンクの記述のみ。
このテキストの入った要素(ここでは<a></a>)の背景画像としてボタン画像を表示させるんです。

=css=

a.btn01{
	display:block;
	height:40px;
	width:100px;
	background:url(../../images/page_html_css/btn/btn_01.png) no-repeat;
	text-indent:-9999px;
	overflow:hidden;
}
a.btn01:hover{ background-position:0 -40px; }

こんな感じで。

テキストは、text-indent:-9999px;で見えなくします。
ボタンは一つ分だけ見えるよう、背景を設定している要素のwidthとheightを指定し、
そこからはみ出た部分はoverflow:hidden;で見えないように。

そして、:hover時は背景画像の位置を変える。background-position:0 -40px;
変えるというか、上に引き上げてずらした感じ。
はみ出た部分は前に記述したoverflow:hidden;のおかげで見えません。

これで動きます。

・２枚の画像でロールオーバー

これは画像を２枚用意。
画像名は_onと_offで分けると便利。

そして！これも、背景画像で表示もするのですが・・・

=html=

<a class="btn02" title="cssでの02ボタン" href="#"><img src="../images/page_html_css/btn/btn_01_off.png" alt="cssでの02ボタン" width="100" height="40" /></a>

こんな感じで、テキストではなく、画像にリンク設定。
この時の画像は_off画像です。

=css=

a.btn02{
	display:block;
	height:40px;
	width:100px;
	background:#fff url(../../images/page_html_css/btn/btn_01_on.png) no-repeat;
}
a.btn02:hover{
	background-color:transparent;
}
a.btn02:hover img{
	visibility:hidden;
}

これは、<a></a>のなかに、画像と背景画像、どちらも設定して、
通常時は画像が載って背景が見えない状態、
:hover時は画像が見えなくなって(visibility:hidden;により)通常時では見えなかった背景画像を出す、という方法。
マウスを要素の範囲に乗せたときにoff画像は非表示にし、背景画像にしたon画像を出す方法です。 IE６では画像を非表示にするだけではうまくいかないので、背景色も意図的に変更しています。

この二つの方法、
ｃｓｓが効かなくなった時は１つ目は文字が表示されます。２つ目はロールオーバーはしませんが画像は表示されます。
また、印刷する際、１つ目は画像が背景になってしまい、表示されないようです。なので印刷デザインがそのまま表示される２つ目の方法のほうがいいみたいです。

jsでロールオーバー

jsといってもjQuery。
なので、これらを使うためにはまず、<head></head>内にjQueryを読み込んでくださいね。

・opacity-rollover2.1.jsを使う

さて。
HTMLにはすでにjQueryを読み込んだ記述があるかと思います。
もうひとつopacity-rollover2.1.jsを読み込みます。

画像ですが、一枚だけです。
２枚の画像をくっつけたものではなく、元のボタン一枚です。
”透明度”を変えてロールオーバーさせるんです。

htmlは画像にリンク設定。

=html(bodyの中)=

<a href="#" title="jsでのボタン01" class="js_btn01"><img src="../images/page_html_css/btn/btn_01_off.png" alt="jsでのボタン01" width="100" height="40" /></a>

次は、jsファイル。新しいファイルを作ってもいいし、直接書いても良いです。

=js=

(function($) {
	$(function() {
		$('.js_btn01').opOver();
	});
 })(jQuery)

これはｃｓｓファイルもいらなく、$(‘.js_btn01′).opOver();の部分でロールオーバーさせたい要素と、ロールオーバーの動きを指定するだけでできちゃいます。
今回はスタンダートな動きですが、一瞬光ったような動きや、見た目の動きを逆にしてみたり、 .opOver();の部分の指定を変えるだけで一枚の画像で様々な動きのロールオーバーができます。
jquery-opacity-rollover.jsのダウンロード、詳細は
「透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた」で紹介されています。

画像が１枚でこのようなロールオーバーができるので、ボタンだけではなく、写真などをロールオーバーしたいときにはいいかもしれません。
ちなみにこちらも HTMLで画像を表示しているので、ｊｓが無効だった場合でも、ロールオーバーはしませんがデザインはそのままです。

・_onと_offで切り替えるロールオーバー

これもjQueryを使います。

用意する画像は２つ。
名前には、必ず”画像名_on.png”や”画像名_off.png”と_on,_offをつけてください。
保存形式は好きなものを。

そして、<head></head>内にこれを記述。

=js=

<script type="text/javascript">
	$(document).ready(function(){
		$('.btn_img').mouseover(function() {
			var src = $(this).attr('src');
			$(this).attr('src', src.replace("_off", "_on"));
		});
		$('.btn_img').mouseout(function() {
			var src = $(this).attr('src');
			$(this).attr('src', src.replace("_on", "_off"));
		});
	});
</script>

=html(bodyの中)=

<a href="#" title="jsでのボタン01"><img src="../images/page_html_css/btn/btn_01_off.png" alt="jsでのボタン01" width="100" height="40" class="btn_img" /></a>

こんな感じで、jsでは、「”.btn_img”というクラス名のついた画像をロールオーバー(マウスオーバー)した時、画像名の_on，_offを切り替える」
という指示を出しています。
簡単です！
手間いらずです！

今回４通りの方法を紹介させていただきましたが、どれもこれだけが良い！とも言えません。たぶん・・。
なので、 それぞれを使えるようになり、用途によって自分で判断し使い分けることができたら一番良いのではないかと思います。

ちなみに、私のお気に入りは１番目と４番目です。
１番目は画像が少なくて済むところが良いと思います。
４番目はｃｓｓもいらず、jsも少しで大丈夫、画像名を変えたり、クラスを追加するだけでできるので、
変更がしやすいです。

このほかにもまだまだいろんな方法や、もっとリッチに表現できるプラグインがたくさんあるかと思います。
面白そうなものを見つけたらまた紹介します！

Similar Posts:

Leave a Reply