jQueryでマウスオーバー時に画像を切り替える方法です。

.hover()で画像を切り替える

あらかじめ、使用する画像に「img_on.png」と「img_off.png」というように_on_offを付けたものを用意しておきます。そして、jQueryを使用してhover時にこれらの画像を切り替えるように設定していきます。

HTMLは以下のように記述して、js-hoverというclassを付けています。

HTML

<a href="#" class="js-hover"><img src="/sample/images/button_off.png" alt=""></a>

sample1は.hover()を使用して、画像にマウスオーバーしたら、src_offから_onに切り替わるように設定しています。

See the Pen jQuery hover img change by gri-t (@gri-t) on CodePen.

CSSで画像を切り替える

先ほどの例だと、画像がパッと切り変わってしまっていたので、ふわっとアニメーションさせながら切り変わるようにしたいという場合はCSSで実装するのが簡単かと思います。

画像は先ほどと同様、onとoffの画像を二枚用意し、重ねて表示させます。

HTML

<a href="#" class="rollover">
  <img class="on" src="/sample/images/button_on.png" alt="">
  <img class="off" src="/sample/images/button_off.png" alt="">
</a>

下記のSample2の例では、on画像の上にoff画像が重なっていて、hoverしたら、offopacity: 0になるように設定しています。

See the Pen jQuery hover img change by gri-t (@gri-t) on CodePen.

.hover()でアニメーションさせながら画像を切り替える

jQueryでもCSSのようにふわっとアニメーションさせた場合、.animate()を使ってopacityを変化させることで実装可能です。

HTML

<a href="#" class="js-hover-fade">
 <img src="/sample/images/button_off.png" alt="">
</a>

Sample3では、off画像の前に.before()を使って、styleでopacity: 0を指定したon画像を追加します。そして、.animate()でふわっと切り替えます。

See the Pen jQuery hover img change by gri-t (@gri-t) on CodePen.

以上、マウスオーバー時に画像を切り替える方法でした。