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となる -->

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

jQuery関連記事

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

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

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

関連記事

コメント

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

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

CAPTCHA


New Article

  1. 三国天武 陥陣先鋒
  2. 三国天武 顔良 文醜
  3. 三国天武 名馬 黒捷
  4. 三国天部 夏侯淵 神器
  5. 三国天武 夏侯淵 夏侯妙才

人気記事

  • 該当なし
PAGE TOP