Life Collections

「送信ボタンにカーソルを押した時に色を変えたい」こういったユーザビリティに関する要望は少なくないです！CSSでも実現できますが、CSSでは複数時に1つ1つソースコードを書かないといけなくなっちゃうので、今回はjQueryで、カーソルをあてた際に画像を切り替える方法をご紹介します(｡･ω･｡)

ソースコード解説

jQueryでマウスオーバーのイベントを拾う方法

jQueryでは、マウスオーバー、マウスアウトイベントを、下記コードで取得します！

• .mouseover：マウスがその属性の上に乗った時
• .mouseout：マウスがその属性の上から外れた時

$('img.onChange').mouseover

ソースコード全体

jQueryのソースコード

コピペで利用できるようにしておりますので、ご自由にご活用ください！

/**
 * png画像に_onをつけたり外したりすることで、画像変更を実現
 **/
$(document).ready(function(){  
	/* imgタグのonChange属性に対して、マウスオーバー時に画像切り替えを行う（off→on） */
	$('img.onChange').mouseover(function(){
                /* .png→_on.pngに変更 */
		var onImgUrl = $(this).attr('src').replace(/\.png/ig, '_on.png');
		$(this).attr('src', onImgUrl);
	});
 
	/* imgタグのonChange属性に対して、マウスオーバー時に画像切り替えを行う（on→off） */
	$('img.onChange').mouseout(function(){
		var onImgUrl = $(this).attr('src').replace(/_on\.png/ig, '.png');
		$(this).attr('src', onImgUrl);
	});
});

HTMLコード上の使い方

上記jQueryコードをそのまま活用した場合、下記ルールでHTMLを記載するとマウスオーバーで画像が切り替わります(｡･ω･｡)

• 対象はpng画像とする
• on-offを実現したい属性のクラスに、「class=’onChange’」を指定する
• 画像は、デフォルトの名前+”_on”の画像も用意しておく（同じフォルダ階層に配置）

<!-- 例 -->
<img class="onChange" src="img/online.png" />
<!-- ※この場合、マウスが乗っかるとsrc="img/online_on.pngとなる -->

いかがでしたでしょうか？マウスオーバーで画像を変えて、よりユーザビリティの高いサイトを目指しましょう！

2020.05.17

『jQuery』まとめ記事一覧

本サイトのjQuery関連記事をまとめています。是非お立ち寄りください。 jQuery 関連記事一覧 ...

jQuery関連記事

jQueryのその他記事もまとめてますので、是非お立ち寄りください(｡･ω･｡)

2020.05.17

[jQuery] jQueryでツールチップを自作する方法

対象オブジェクトにフォーカスをあてた際に、ツールチップを表示するjQueryコードを自作しました。是非ご利用ください。 仕様 マウスオーバーしたらチップを表示する ※tipMSG属性の値が、ツールチップとして表示される マウスアウトしたらチップを非...

2020.05.17

[jQuery] パフォーマンス向上のコツ（処理速度向上・高速化 あれこれ）

jQueryで少しでも処理速度を向上させるためのTipsをまとめてみました。 1. セレクタにはクラス名だけでなく要素名も書く $("#navi a")と記載した場合、まずa要素を検索し、その中から#naviが先祖要素にあたるa要素をjQueryオ...

2018.08.10

[jQuery] formのアクションを変更する〜フォーム送信時（Submit時）にボタン毎に遷移先URLを変更する方法〜

「送信ボタンを複数配置して、押したボタンによって遷移するURLを変えたい」。そんな時、クライアントサイドのjQueryで実現できるようなコードをご紹介します！ 概要 今回は、submitボタンに新たな属性を追加し、その属性に指定されたURLで遷移する先が決...

2018.08.09

[jQuery] リアルタイムに入力フォームのバリデーションをチェックするコード集

WEBページ作成時に作るに手間がかかる入力バリデーションチェック。PHP等のサーバサイドでのチェック方法もありますが、クライアントサイドでチェックできればリアルタイムにNG箇所を伝えることができます！今回は、javascript・jQueryで実装する入力フォ...

2018.06.20

[jQuery] カーソルをあてた時に画像を切り替える方法（マウスオーバー・マウスアウト）

「送信ボタンにカーソルを押した時に色を変えたい」こういったユーザビリティに関する要望は少なくないです！CSSでも実現できますが、CSSでは複数時に1つ1つソースコードを書かないといけなくなっちゃうので、今回はjQueryで、カーソルをあてた際に画像を切り替える...