勉強したことのメモ

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

  関連記事

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

JavaScriptで指定したURLの最終パス名(ディレクトリ)を取得する方法

JavaScriptで「https://taitan916.info/blog/ ...

jQueryにて指定した要素を検索条件から除外するnot()の利用方法

あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...