Loading

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


「送信ボタンにカーソルを押した時に色を変えたい」こういったユーザビリティに関する要望は少なくないです!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となる -->

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

jQuery関連記事

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

ふぇにば|PhoEniBiR

投稿者プロフィール

わくわくしてて偉い系VTuver ふぇにば です。
少しでもお役に立てておりましたら嬉しいです(。・ω・。)

関連記事

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

    2020.05.17
  2. [CSS] CSSだけで手軽にコピー禁止する方法!

    2017.10.11
  3. [CSS] ブラウザ毎にずれないCSS!リセットCSS・デフォルトCSSコード公…

    2018.08.07
  4. [CSS] CSSのみでデザインするおしゃれなヘッダー・見出し(h1~h6タグ)…

    2018.06.11
  5. [PHP] ショートカット(短縮)URL取得 with Google短縮URL …

    2016.05.09
  6. 『Excel VBA』マクロで辞書オブジェクト(KEY-VALUE)の使い方まと…

    2016.09.01

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. ドラクエウォーク スロット どっちがいい
  2. 三國志真戦 戦法中国語翻訳
  3. ドラクエウォーク 2023年装備ガチャ
  4. ドラクエウォーク 覚醒千里行
  5. VRChat TrustRank
PAGE TOP