Loading

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

HNIMGL9701_TP_V4

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

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

[Excel VBA] マクロでエクセルの行の高さを自動調整する方法

[三国天武] 詭道人形(きどうにんぎょう)の使い方!効果的な配置方法と攻略法!

関連記事

  1. [Linux] シェルスクリプトでフォルダ単位圧縮バックアップ & ロ…

    2018.01.09
  2. SSHでリモートコマンド実行、成功失敗の返り値(戻り値)取得方法

    2016.06.23
  3. [SQLServer] クエリのパフォーマンス調査・ボトルネックの特定

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

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

    2018.06.11
  6. [Windows] コマンドプロンプトで簡単にファイル一覧を作成する方法!

    2017.11.08

コメント

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

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

CAPTCHA


New Article

  1. sangokutenbu_toronazonazo
  2. sangokutenbu_nikyo
  3. sangokutenbu_ranking
  4. sangokutenbu_bunou
  5. gintama
PAGE TOP