マウスオーバーでの画像切り替えを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
関連記事
-
-
JavaScriptで特定の要素にマウスオーバーした際、ツールチップを表示させる「Tippy.js」ライブラリの利用方法
JavaScriptで特定の要素にマウスオーバーした際、ちょっとした説明文等を書 ...
-
-
Leafletで「Leaflet-MiniMap」プラグインを導入し通常のマップと連動するミニマップを表示する方法
Leafletでマップを表示した上で、そのマップと連動したミニマップを表示させた ...
-
-
バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う方法
サーバ内のCSVファイルを読み込み、そのデータをサイト上で取り扱いたい。通常だと ...
-
-
jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...
-
-
JavScriptでalertを閉じた後にページ遷移させる方法
JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...