javascript マウスオーバーで画像を切り替える

javascript マウスオーバーで画像を切り替える

javascriptで、イベントハンドラのonmouseoverを使用して、マウスオーバー時に画像を切り替えるサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

onmouseover使い方

onmouseoverを使用すれば、マウスオーバー時に行う処理を設定することが可能です。

イベントを設定しても、同じです。

サンプルコード

以下は、
マウスオーバーすると画像を変更して、マウスアウトすると画像を元に戻す
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

切り替わっていることが確認できます。