マウスオーバーでの画像切り替えをJavaScriptで簡単に対応
2024/03/04
マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なんだろうけどCSSよく分かってないので手を出しづらい。
また、jQueryやJavaScriptでいちいち書いていくのも面倒くさいなぁと思って探したら以下の一文でいけるみたい。
ソースコード
<img src="初期表示画像" onmouseover="this.src='切り替え時表示画像'" onmouseout="this.src='初期表示画像'">
mouseover
https://developer.mozilla.org/ja/docs/Web/API/Element/mouseover_event
関連記事
-
-
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...
-
-
バニラJavaScriptでTOPへ戻る機能(ボタン)の作成方法
ページ内をある程度スクロールするとTOPへ戻るリンクを表示させたかった。ただ、複 ...
-
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...
-
-
JavaScriptで数値のカンマ区切り化とカンマ区切りの解除
JavaScriptで数値を3桁ごとにカンマ区切り化したい。また、それとは逆にカ ...
-
-
javascriptで月末日を取得
以前、PHPで月末日を取得したけれども javascriptで月末日を扱いたいケ ...