インラインJavaScriptでmouseOver/mouseOutを使って画像を手軽に切り替える方法

マウスカーソルを画像に重ねたとき（mouseOver）に別の画像へ切り替え、マウスが離れたとき（mouseOut）に元の画像へ戻す——そんな動作を、インラインJavaScriptだけで手軽に実現する方法をご紹介します。HTMLタグに直接イベントハンドラを記述するため、外部ファイルや追加のスクリプトは一切不要です。

<img
  onmouseover="this.src='new-image.png'"
  onmouseout="this.src='default-image.png'"
  src="default-image.png"
/>

仕組みはとてもシンプルです。onmouseover属性の中で、this.src（このimg要素自身のsrc属性）を別の画像パスに書き換えています。そしてマウスが画像から離れるとonmouseoutが発火し、srcを元の画像に戻すことで元の状態に復帰します。

次の例は同じコードですが、外部のプレースホルダー画像サービスを使用したものです。そのままHTMLファイルに貼り付けてブラウザで開くと、マウスを乗せるたびに赤色と青色の画像が交互に切り替わる様子を確認できます。

<img
  onmouseover="this.src='https://via.placeholder.com/150/0000FF/FFFFFF/?text=Digital.com'"
  onmouseout="this.src='https://via.placeholder.com/150/FF0000/808080/?text=Down.com'"
  src="https://via.placeholder.com/150/FF0000/808080/?text=Down.com"
/>

コードデモ

上記のコードをコピーして拡張子.htmlのファイルとして保存し、ブラウザで開くだけで即座に動作を確認できます。サーバーやビルド環境は不要です。

補足：より快適に使うためのポイント

• 画像の先読み（プリロード）：初回のマウスオーバー時には切り替え先の画像がまだダウンロードされておらず、表示が一瞬遅れることがあります。const img = new Image(); img.src = 'new-image.png';のようにページ読み込み時にプリロードしておくと、スムーズに切り替わります。
• alt属性の付与：アクセシビリティとSEOの観点から、img要素には必ず適切なalt属性を設定しましょう。
• 代替手法の検討：規模が大きくなる場合は、CSSの:hover擬似クラスとbackground-imageを組み合わせる方法や、JavaScriptでaddEventListener('mouseover', ...)を使う方法の方が、コードの分離と保守性の面で有利です。