勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

   2024/03/04  JavaScript

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分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

  関連記事

JavaScriptで三項演算子の中に三項演算子
JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法
JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法

JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...

JavaScriptで数値のカウントアップ及びカウントダウン
JavaScriptで数値のカウントアップ及びカウントダウン

JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...

JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法

JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...

jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...