マウスオーバー時にボタンの画像を切り替える方法として、
通常の場合は、CSSのhover時にbackground-imageを切り替えるのが一般的だと思います。
今回は、実務の中でCSSで対応できず、jQueryで対応した時のやり方をまとめておきます。
jQueryでマウスオーバー時のボタン画像切り替え
まず前提として、以下のようなHTMLが存在するとします。
<a href="#..."><img src="./image/btn_image_off.jpg"></a>この時、設定する画像のファイル名の末尾に「_off」と付けておきます。
そして、マウスオーバー時に切り替えたい画像には、上で設定した画像のファイル名と同じ名前の末尾に「_on」と付けて格納しておきます。
なので、ディレクトリに格納しておく画像としては以下２つのファイルです。
①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」と付いている画像に切り替えて表示させることができます。
