勉強したことのメモ

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で英字を大文字⇔小文字に変換したかった。以下に対応方法をメモ ...

amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法

amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...

jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...

Chart.jsで横スクロール可能なグラフを表示させる方法

Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラ ...