勉強したことのメモ

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の三項演算子

いつもと違う書き方? 使い方の三項演算子が あったのでメモ。 ■ソース var ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

Leafletにタグフィルター機能を実装できる「leaflet-tag-filter-button」プラグインの利用方法

以前にLeafletでマーカーをグループ化し、チェックボックスの状態により表示非 ...

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...