マウスを乗せると絵が変わる

• トップ
• How To
• マウスを乗せると絵が変わる

説明

画像にマウスを乗せると別の画像を表示します。

ソース

まず画像として linkA.gif を表示しています。画像にマウスが乗ると mouseover イベントが発生し、イベントハンドラの中で linkB.gif に画像を切り替えます。マウスが離れると mouseout イベントが発生し、イベントハンドラの中で linkA.gif に画像を戻しています。冒頭で img2 を読み込んでいますが、これはあらかじめ linkB.gif 画像を読み込んでキャッシュしておき、マウスが画像に乗った時にダウンロードすることなく即座に表示するためのテクニックです。

window.addEventListener("load", () => {
  const img2 = new Image();
  img2.src = "image/linkB.gif";
  const img = document.getElementById("img");
  img.addEventListener("mouseover", () => { img.src = "image/linkB.gif"; });
  img.addEventListener("mouseout",  () => { img.src = "image/linkA.gif"; });
});

<img id="img" src="image/linkA.gif" alt="link">

実行例