マウスオーバーでの画像切り替えを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
関連記事
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...
-
-
JavaScriptで三項演算子の中に三項演算子
既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...
-
-
簡単にスケルトンローディングを実装できる「phantom-ui」ライブラリの使用方法
あるサイトでページを読み込んだ際、最初は各レイアウトの枠組み的な部分を表示、次に ...
-
-
フォームに入力された値をJavaScriptのURLコンストラクタ(パーサー)でURL形式かチェックする方法
フォームのテキストボックスに入力された値がURL形式になっているかチェックしたか ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...