簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

  • Posted on
  • Category : Tips
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

画像のオンオフ切り替えといったようなマウスオーバーイベントで、さくっと簡単に実装できるものを幾つか紹介します。CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。

※以下で紹介する方法は、IE6は対象外にしています。
中には使用できるものや少しいじれば使用可能というものもありますが、基本的に未確認・非対応のものになります。

※以下で紹介しているソースをそのまま使用すると、サイトによっては全てのa要素内のimgに適用されてしまいます。
一部のみに使用する場合は、例えばCSSであればclass="over"ようなクラスを指定して、使用したい箇所にそのクラスを記述するといった方法で使用してください。

サンプルで使用する画像とDEMOについて

サンプルで使用する画像

各マウスオーバーの動きを実装するに辺り、上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。

  • type A
    単体のボタン画像
  • type B
    オンとオフを1枚の画像にした、スプライト型
  • type C
    オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。

また、サンプルも用意したので、実際の動きはこちらで確認して下さい。
DEMO 1は目次の1~6まで、DEMO 2では目次の7~12のサンプルになります。

簡単に実装できる、ボタン画像のマウスオーバーイベント 10 目次

  1. CSS:マウスオーバー時に透過させる
  2. CSS:マウスオーバー時に透過させる+アニメーション
  3. CSS:画像置換でオンオフ切り替え
  4. CSS:画像置換でオンオフ切り替え+アニメーション
  5. CSS:マウスオーバー時にキランとさせる
  6. JavaScript:オンオフ切り替え
  7. jQuery:マウスオーバー時に透過させる
  8. jQuery:マウスオーバー時に透過させる+アニメーション
  9. jQuery:マウスオーバー時に一瞬だけ光らせる
  10. jQuery:オンオフ切り替え
  11. jQuery:オンオフ切り替え+アニメーション
  12. jQuery:オンオフ切り替え+アニメーション 2

1. CSS:マウスオーバー時に透過させる

CSS:マウスオーバー時に透過させる

CSSのopacity(IEはfilter)のみを使って、マウスオーバー時に画像を透過する方法です。
typeAのようなオン画像がないもので、マウスオーバー時に動きを出したい場合などに使えます。
あと、稀にですがJavaScriptは禁止みたいな案件とかの場合でも使用できますね。
HTMLとCSSはそれぞれ以下のようになります。

HTML

<p><a href="#"><img src="./images/btn_01.gif" alt="button" width="152" height="34" /></a></p>

CSS

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

filterはIE、opacityはその他のブラウザ向けの記述となります。
透過具合を調整したい時は、filterは0~100、opacityは0~1.0の間でそれぞれの数値を変更して調整できます。

対応ブラウザとDEMOは以下になります。

対応ブラウザ

CSS:マウスオーバー時に透過させる 対応ブラウザ

目次へ

2. CSS:マウスオーバー時に透過させる+アニメーション

マウスオーバー時に透過させる+アニメーション

パッと見は先程と変わらず透過させてるだけですが、transitionを使って透過の動きにアニメーションを加えたものになります。
同じくtypeAのようなオン画像がないもので、マウスオーバー時に動きを出したい場合などに使えます。
HTMLとCSSはそれぞれ以下のようになります。

HTML

<p><a href="#"><img src="./images/btn_01.gif" alt="button" width="152" height="34" /></a></p>

CSS

a img {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}
a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

CSSの2行目~5行目までの記述で動きの調整を行なっています。
動きを変えたい場合は、0.3sやease-in-outの部分を変更してください。

上記ソースではマウスアウト時の動きも同じになっているのですが、例えばマウスアウト時はアニメーションの必要がないという場合は、2~5行目をそのままa:hover imgに追記して、a imgの部分は削除することで実装できます。
また、マウスオーバー時は早く、マウスアウト時はゆっくりといったように、それぞれにアニメーションの動きを別々にしたい場合は、2~5行目をa:hover imgに追記して数値を調整することで実装できます。

ただ、IEではtransitionをサポートしていないので、透過されるだけでアニメーションは付きません。
IEでも同じ動きを実装したい場合は「8. jQuery:マウスオーバー時に透過させる+アニメーション」で実装することができます。

対応ブラウザとDEMOは以下になります。

対応ブラウザ

CSS:マウスオーバー時に透過させる+アニメーション 対応ブラウザ

目次へ

3. CSS:画像置換でオンオフ切り替え

CSS:画像置換でオンオフ切り替え

画像置換を使ってオンオフの切り替えを行う方法です。
この方法を用いる際は、typeBのようなオンオフが1枚になった画像を用意する必要があります。
画像置換自体はオンオフそれぞれの画像をわけてもできないことはないのですが、別々の画像にしているとブラウザによってはちらつくことがあるので、それを回避するためにtypeBのように1枚にした画像を使用します。
HTMLとCSSはそれぞれ以下のようになります。

HTML

<p><a href="#"></a></p>

CSS

a {
	display: block;
	width: 152px;
	height: 34px;
	background: url(images/btn_02.gif) no-repeat 0 0;
}
a:hover {
	background-position: 0 bottom;
}

対応ブラウザとDEMOは以下になります。

対応ブラウザ

CSS:画像置換でオンオフ切り替え 対応ブラウザ

目次へ

※ちょっと寄り道…

上で紹介した画像置換ですが、ほとんどのサイトはこの方法を使用する際にtext-indent: -9999px;とかでテキストをズラして見えなくしたりしていますが、この方法はスパムと判断されるなどの理由によって、あまりよくない方法とされています。
今回のサンプルもこの方法で記述しようと思ったのですが、これに関してはいろいろなところで意見が交わされていて、正直どの方法が良いのかとかも自信を持って言えないので、今回はあえてテキストを入力せずにサンプルを作成しました。
実際この方法は簡単ですし、僕自身も初め画像置換について知ったのはこの方法だったので、何だかんだで一番よく使っていましたが…。

少し調べてみるとtext-indentを使わないでの画像置換はいろいろやり方があるみたいですが、以下エントリーでその中でも代表的な方法が2つ紹介されているので、text-indentを使用しないで行いたい場合は参考になると思います。
また、エントリー自体はCSSスプライトについてのまとめなのですが、全体的に上手くまとまっていて説明も丁寧なのでとても参考になります。

4. CSS:画像置換でオンオフ切り替え+アニメーション

CSS:画像置換でオンオフ切り替え+アニメーション

同じく画像置換を用いた方法なのですが、次はこの動きにtransitionを使ってアニメーションを加えてみると、オン画像に切り替わる際にスライドするような動きを実装することができます。
HTMLとCSSはそれぞれ以下のようになります。

HTML

<p><a href="#"></a></p>

CSS

a {
	display: block;
	width: 152px;
	height: 34px;
	background: url(images/btn_02.gif) no-repeat 0 0;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}
a:hover {
	background-position: 0 bottom;
}

対応ブラウザとDEMOは以下になります。

対応ブラウザ

CSS:画像置換でオンオフ切り替え+アニメーション 対応ブラウザ

目次へ

5. CSS:マウスオーバー時にキランとさせる

CSS:マウスオーバー時にキランとさせる

マウスオーバーした時にキランと左から右へ光るような効果を付けます。
HTMLとCSSはそれぞれ以下のようになります。

HTML

<p><a href="#"><span></span></a></p>

CSS

a {
	position: relative;
	display: block;
	width: 152px;
	height: 34px;
	background: url(images/btn_01.gif) no-repeat 0 0;
	overflow: hidden;
}
a span {
	opacity: 0;
	display: block;
	width: 20px;
	height: 100px;
	position: absolute;
	top: -34px;
	left: -152px;
	background: rgba(255, 255, 255, 0.2);
	background: -moz-linear-gradient(
	            left,
	            rgba(255, 255, 255, 0.2) 0%,
	            rgba(255, 255, 255, 0.5) 40%,
	            rgba(255, 255, 255, 0.8) 90%,
	            rgba(255, 255, 255, 0.0) 100%
	);
	background: -webkit-linear-gradient(
	            top,
	            rgba(255, 255, 255, 0.2) 0%,
	            rgba(255, 255, 255, 0.5) 40%,
	            rgba(255, 255, 255, 0.8) 90%,
	            rgba(255, 255, 255, 0.0) 100%
	);
	background: -webkit-gradient(
	            linear, left top, right top,
	            color-stop(0%  ,rgba(255, 255, 255, 0.2)),
	            color-stop(40% ,rgba(255, 255, 255, 0.5)),
	            color-stop(90% ,rgba(255, 255, 255, 0.8)),
	            color-stop(100%,rgba(255, 255, 255, 0.0))
	);
	background: -o-linear-gradient(
	            top,
	            rgba(255, 255, 255, 0.2) 0%,
	            rgba(255, 255, 255, 0.5) 40%,
	            rgba(255, 255, 255, 0.8) 90%,
	            rgba(255, 255, 255, 0.0) 100%
	);
	background: -ms-linear-gradient(
	            top,
	            rgba(255, 255, 255, 0.2) 0%,
	            rgba(255, 255, 255, 0.5) 40%,
	            rgba(255, 255, 255, 0.8) 90%,
	            rgba(255, 255, 255, 0.0) 100%
	);
	background: linear-gradient(
	            top,
	            rgba(255, 255, 255, 0.2) 0%,
	            rgba(255, 255, 255, 0.5) 40%,
	            rgba(255, 255, 255, 0.8) 90%,
	            rgba(255, 255, 255, 0.0) 100%
	);
	-webkit-transition-property: left, top, opacity;
	   -moz-transition-property: left, top, opacity;
	    -ms-transition-property: left, top, opacity;
	     -o-transition-property: left, top, opacity;
	        transition-property: left, top, opacity;
	-webkit-transition-duration: 0.7s, 0.5s, 0.1s;
	   -moz-transition-duration: 0.7s, 0.5s, 0.1s;
	    -ms-transition-duration: 0.7s, 0.5s, 0.1s;
	     -o-transition-duration: 0.7s, 0.5s, 0.1s;
	        transition-duration: 0.7s, 0.5s, 0.1s;
	-webkit-transition-timing-function: ease;
	   -moz-transition-timing-function: ease;
	    -ms-transition-timing-function: ease;
	     -o-transition-timing-function: ease;
	        transition-timing-function: ease;
	-webkit-transform: rotate(30deg);
	   -moz-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	     -o-transform: rotate(30deg);
	        transform: rotate(30deg);
}
a:hover span {
	opacity: 1;
	top: -50px;
	left: 174px;
}

対応ブラウザとDEMOは以下になります。

対応ブラウザ

CSS:マウスオーバー時にキランとさせる 対応ブラウザ

目次へ

6. JavaScript:オンオフ切り替え

JavaScript:オンオフ切り替え

画像のオンオフ切り替えをJavaScriptを使った方法で、typeCのようなオンとオフが別になっている画像を使用します。
jQueryを使えばもっと少ない記述で簡単にできたりしますが、例えば他には一切スクリプトは使っていないだとか、jQueryをわざわざ使う必要がない場合などはこれだけで十分だと思います。

今回は個人的にもよく使わせてもらっている「CSS HappyLife」さんのものを紹介させてもらいます。
HTMLとJSはそれぞれ以下のようになります。

HTML - head

<script type="text/javascript" src="js/smartRollover.js"></script>

HTML - body

<p><a href="#"><img src="./images/btn_03_off.gif" alt="button" width="152" height="34" /></a></p>

JavaScript

function smartRollover() {
	if(document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");

		for(var i=0; i < images.length; i++) {
			if(images[i].getAttribute("src").match("_off."))
			{
				images[i].onmouseover = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
				}
				images[i].onmouseout = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
				}
			}
		}
	}
}

if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}

CSS HappyLifeさんで紹介しているsmartRollover.jsをDLして、head内で外部ファイルをして読み込ませます。
パスなどは環境に合わせて変更して下さい。
あとは、拡張子前に"_off"がついた画像を設置するだけで、マウスオーバー時に拡張子前に"_on"がついた画像に切り替わります

対応ブラウザとDEMOは以下になります。

対応ブラウザ

JavaScript:オンオフ切り替え 対応ブラウザ

目次へ

7. jQuery:マウスオーバー時に透過させる

jQuery:マウスオーバー時に透過させる

1. CSS:マウスオーバー時に透過させる」のjQuery版です。
jQueryを使用しますので、予めライブラリも読み込ませてください。

HTML

<p><a href="#"><img src="./images/btn_01.gif" alt="button" width="152" height="34" /></a></p>

jQuery

$(function(){
	$('a img').hover(
		function(){$(this).fadeTo(1, 0.6);},
		function(){$(this).fadeTo(1, 1.0);}
	);
});

透過具合を調整したい場合は、ソース4行目で0.6となっているところを0~1.0の間で数値変更します。

対応ブラウザとDEMOは以下になります。

対応ブラウザ

jQuery:マウスオーバー時に透過させる 対応ブラウザ

目次へ

8. jQuery:マウスオーバー時に透過させる+アニメーション

jQuery:マウスオーバー時に透過させる+アニメーション

2. CSS:マウスオーバー時に透過させる+アニメーション」のjQuery版です。
これならtransitionを使えないIEでも動きを実装できます。
jQueryを使用しますので、予めライブラリも読み込ませてください。

HTML

<p><a href="#"><img src="./images/btn_01.gif" alt="button" width="152" height="34" /></a></p>

jQuery

$(function(){
	$('a img').hover(
		function(){$(this).fadeTo(200, 0.6);},
		function(){$(this).fadeTo(200, 1.0);}
	);
});

透過具合を調整したい場合は、ソース4行目で0.6となっているところを0~1.0の間で数値変更します。
また、アニメーションの速度を調整したい場合は、ソース4行目と7行目で指定している200の数値を変更してください。
アニメーション速度は'slow''normal''fast'でも指定可能です。

対応ブラウザとDEMOは以下になります。

対応ブラウザ

jQuery:マウスオーバー時に透過させる+アニメーション 対応ブラウザ

目次へ

9. jQuery:マウスオーバー時に一瞬だけ光らせる

jQuery:マウスオーバー時に一瞬だけ光らせる

透過させる動きを使って、一瞬だけボタンが光るような動きをつける方法です。
jQueryを使用しますので、予めライブラリも読み込ませてください。

HTML

<p><a href="#"><img src="./images/btn_01.gif" alt="button" width="152" height="34" /></a></p>

jQuery

$(function(){
	$('a img').hover(
		function(){$(this).fadeTo(0, 0.6).fadeTo('normal', 1.0);},
		function(){$(this).fadeTo('fast', 1.0);}
	);
});

透過具合を調整したい場合は、ソース4行目で0.6となっているところを0~1.0の間で数値変更します。
また、速度を調整したい場合は、ソース4行目と7行目で指定している'normal''fast'の部分を変更してください。

対応ブラウザとDEMOは以下になります。

対応ブラウザ

jQuery:マウスオーバー時に一瞬だけ光らせる 対応ブラウザ

目次へ

10.jQuery:オンオフ切り替え

jQuery:オンオフ切り替え

6. JavaScript:オンオフ切り替え」のjQuery版です。
typeCのようなオンとオフが別になっている画像を使用します。
jQueryを使用しますので、予めライブラリも読み込ませてください。

HTML

<p><a href="#"><img src="./images/btn_03_off.gif" alt="button" width="152" height="34" /></a></p>

jQuery

$(function(){
	$('a img').hover(function(){
		$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
			}, function(){
			   if (!$(this).hasClass('current')) {
			   $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
		}
	});
});

対応ブラウザとDEMOは以下になります。

対応ブラウザ

jQuery:オンオフ切り替え 対応ブラウザ

目次へ

11. jQuery:オンオフ切り替え+アニメーション

jQuery:オンオフ切り替え+アニメーション

4. CSS:画像置換でオンオフ切り替え+アニメーション」のjQuery版です。
transitionを使えないIEでも動きを実装できます。
CSSで実装する場合は、typeBのようなオンオフが一緒になったものを画像置換で実装しましたが、今回はそのままimgで実装する方法になります。
jQueryを使用しますので、予めライブラリも読み込ませてください。

HTML

<p><a href="#"><img src="./images/btn_02.gif" alt="button" width="152" height="68" /></a></p>

CSS

p {
	height: 34px;
	overflow: hidden;
}

jQuery

$(function() {
	$('p a img').hover(
		function () {$(this).stop().animate({'marginTop':'-34px'}, 300);},
		function () {$(this).stop().animate({'marginTop':'0px'}, 300);}
	);
});

HTMLは普通にimgで指定し、CSSでボタンひとつ分の高さ(使用する画像の半分の高さ)を指定して、非表示にしておきたいオン部分はoverflow: hidden;で隠しておきます。
jQueryは、ソース5行目の-34pxとなっているところを画像に高さによって変更してください。
また、速度は他と同様でサンプルのように数値で指定することもできますし、'slow''fast'などでも指定できます。

対応ブラウザとDEMOは以下になります。

対応ブラウザ

jQuery:オンオフ切り替え+アニメーション 対応ブラウザ

目次へ

12. jQuery:オンオフ切り替え+アニメーション 2

jQuery:オンオフ切り替え+アニメーション 2

typeCのようにオンオフが別になっている画像を使用して、マウスオーバーにふわっとオン画像に切り替える方法です。
jQueryを使用しますので、予めライブラリも読み込ませてください。

HTML

<p><a href="#"><img src="./images/btn_03_off.gif" alt="button" width="152" height="34" /></a></p>

CSS

a {
	display: block;
	width: 152px;
	height: 34px;
	background: url(images/btn_03_on.gif) no-repeat 0 0;
}

jQuery

$(function(){
	$('a img').hover(
		function(){$(this).fadeTo(400, 0);},
		function(){$(this).fadeTo(400, 1.0);}
	);
});

ソースのままですが、HTMLのimgでオフ画像を配置し、背景画像にオン画像を指定します。
そこにjQueryを使って透過する動きを加えてあげると、オフ画像が徐々に消えていって、背景画像に指定したオン画像が徐々に見えるようになり、それが画像がふわっと切り替わっているように見えるというものです。
速度は他と同様でサンプルのように数値で指定することもできますし、'slow''fast'などでも指定できます。

同じような動きを実装する方法は他にもいろいろとあるようですが、個人的に簡単で手っ取り早いので、普段から使うこちらの方法を紹介しました。

対応ブラウザとDEMOは以下になります。

対応ブラウザ

jQuery:オンオフ切り替え+アニメーション 2 対応ブラウザ

目次へ

以上、簡単に実装できる、ボタン画像のマウスオーバーイベントを全部で12個紹介してみました。
一部IEで使用できないとかもありますけど、透過系のものはオン画像がないけど動きをつけたい時とかに簡単に実装できて結構使えると思います :)
中にはこれを併用すればIEでもいけるよとかあると思いますが、今回は簡単にできるものだけに絞って紹介しましたので、そこら辺はスルーしてください。
あと、もし紹介した方法よりももっと簡単にできるとかあったら、コメントなど通じて是非教えていただきたいです。

Back to Top

簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。