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

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

サンプルで使用するボタンイメージ

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

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

また、サンプルも用意したので実際の動きはこちらで確認して下さい。

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

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

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

HTMLとCSSはそれぞれ下記のようになります。

<p><a href="#"><img src="./images/btn_01.gif" alt="button" width="152" height="34"></a></p>
a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

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

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

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

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

HTMLとCSSはそれぞれ下記のようになります。

<p><a href="#"><img src="./images/btn_01.gif" alt="button" width="152" height="34"></a></p>
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.3sease-in-outの部分を変更してください。

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

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

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

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

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

HTMLとCSSはそれぞれ下記のようになります。

<p><a href="#">button</a></p>
a {
  display: block;
  width: 152px;
  height: 34px;
  background: url(images/btn_02.gif) no-repeat 0 0;
  font-size: 0;
}
a:hover {
  background-position: 0 bottom;
}

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

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

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

HTMLとCSSはそれぞれ下記のようになります。

<p><a href="#">button</a></p>
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;
  font-size: 0;
}
a:hover {
  background-position: 0 bottom;
}

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

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

マウスオーバーしたときにキランと左から右へ光るような効果を付けます。

HTMLとCSSはそれぞれ下記のようになります。

<p><a href="#">button<span></span></a></p>
a {
  position: relative;
  display: block;
  width: 152px;
  height: 34px;
  background: url(images/btn_01.gif) no-repeat 0 0;
  overflow: hidden;
  font-size: 0;
}
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;
}

JavaScript:オンオフ切り替え

JavaScript:オンオフ切り替え

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

今回は個人的にもよく使わせてもらっている「ソースがシンプルなJSによるロールオーバー | 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>
smartRollover.js
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);
}

smartRollover.jsをダウンロードして、head内で外部ファ パスなどは環境に合わせて変更して下さい。
あとは、拡張子前に_offがついた画像を設置するだけで、マウスオーバー時に拡張子前に_onがついた画像に切り替わります。

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

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

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

<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となっているところを01.0の間で数値変更します。

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

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

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

<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となっているところを01.0の間で数値変更します。
また、アニメーションの速度を調整したい場合は、ソース4行目と7行目で指定している200の数値を変更してください。
アニメーション速度は'slow', 'normal', 'fast'でも指定可能です。

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

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

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

<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となっているところを01.0の間で数値変更します。
また、速度を調整したい場合は、ソース4行目と7行目で指定している'normal''fast'の部分を変更してください。

jQuery:オンオフ切り替え

jQuery:オンオフ切り替え

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

<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'));
      }
    }
  );
});

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

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

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

<p><a href="#"><img src="./images/btn_02.gif" alt="button" width="152" height="68"></a></p>
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'などでも指定できます。

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

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

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

<p><a href="#"><img src="./images/btn_03_off.gif" alt="button" width="152" height="34"></a></p>
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'などでも指定できます。

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


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