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. [PHP] ソーシャルボタン自作!PHPでSNSのカウント数を取得する(Face…

    2017.11.25
  2. [PHP] igo-phpを用いた形態素解析〜タグクラウド自作に向けて〜

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

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

    2016.05.09
  5. [PHP] 入力フォームのバリデーションチェックを実装する

    2016.05.09
  6. [PHP] date(): It is not safe to rely on …

    2018.08.08

コメント

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

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

CAPTCHA


New Article

  1. IMGL8024_TP_V
  2. sangokutenbu_bacho
  3. 三国天武 武将詳情 好感度
  4. 8d8ea452
  5. CPL filter
PAGE TOP