JavaScript jQuery プログラミング

【 jQuery 】マウスオーバー時にボタン画像の切り替え方法

マウスオーバー時にボタンの画像を切り替える方法として、

通常の場合は、CSSのhover時にbackground-imageを切り替えるのが一般的だと思います。

今回は、実務の中でCSSで対応できず、jQueryで対応した時のやり方をまとめておきます。

jQueryでマウスオーバー時のボタン画像切り替え

まず前提として、以下のようなHTMLが存在するとします。

<a href="#..."><img src="./image/btn_image_off.jpg"></a>

この時、設定する画像のファイル名の末尾に「_off」と付けておきます。

そして、マウスオーバー時に切り替えたい画像には、上で設定した画像のファイル名と同じ名前の末尾に「_on」と付けて格納しておきます。

なので、ディレクトリに格納しておく画像としては以下2つのファイルです。

①btn_image_off.jpg
②btn_image_on.jpg

その上で以下の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では、imgタグをマウスオーバーした際に、imgタグのsrcに設定している文字列の中で「_off」という箇所があれば「_on」に変更する処理を行なっています。

そのため、ボタンの画像にマウスオーバーしたとき、末尾に「_on」と付いている画像に切り替えて表示させることができます。

おすすめ記事はコチラ

ASP.NET Web Forms 1

この記事ではマイクロソフト社が開発・提供しているWebアプリケーション開発用フレームワーク「ASP.NET」の「Web Forms」を「MVC」と比較しながらメリットやデメリット等を含めて解説していき ...

C#VB 2

今回はC#(ver.7.0以降)、VB(ver. 15以降)でforeachループ内で繰り返し回数を参照する方法について解説していきます。 従来の記述方法とよりスマートに記述する方法の2通りを以下にな ...

3

この記事ではSQL Serverで使用できる「STUFF」という便利な関数の使い方について、解説していきます! 他にも便利な関数があれば、別記事にて使用方法を解説していきたいと思います! STUFF ...

4

今回はSQL ServerでデータをXML形式で取得する方法について書いていきます。 FOR XML PATH SQL Serverには「FOR XML PATH」という関数があって、SQL分の末尾に ...

-JavaScript, jQuery, プログラミング
-, ,