onmouseover

onmouseover イベントは、ユーザーが要素にマウスポインタを合わせたときに発生します。このイベントを使用することで、ユーザーが特定の要素にカーソルを置いた際に、特定の処理を実行させることができます。主にインタラクティブなUIの作成に使用されます。

例: ボタンにカーソルを合わせたときに色が変わる。

      <button onmouseover="this.style.backgroundColor='red'">マウスオーバーで色が変わる</button>
    

この例では、ボタンにマウスオーバーした際に、その背景色が赤に変わります。onmouseover 属性内で直接スタイルを変更することができます。

別の例として、画像の上にマウスオーバーすると画像を変えることもできます。

      <img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">
    

上記の例では、画像にマウスオーバーすると画像が変わり、マウスが離れると元の画像に戻ります。

onmouseout

onmouseout イベントは、ユーザーが要素からマウスポインタを離したときに発生します。onmouseover と組み合わせて使用することが多く、視覚的なフィードバックを与えるために使われます。

例: ボタンからカーソルを離したときに色を元に戻す。

      <button onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='white'">ボタン</button>
    

こちらのコードでは、ボタンにマウスオーバーすると色が青に変わり、マウスをボタンから離すと色が白に戻ります。

onmouseout は、onmouseover と同様に、ユーザーが要素を離れたときに視覚的な効果を適用するために使います。

onmousemove

onmousemove イベントは、ユーザーがマウスを移動させるたびに発生します。マウスポインタの位置を追跡したり、動的なフィードバックを与えたりするために使用されます。たとえば、マウスの位置に基づいて動的に何かを更新する場合に使用されます。

例: マウスの位置を画面に表示する。

      <div onmousemove="document.getElementById('output').innerHTML='マウス位置: ' + event.clientX + ', ' + event.clientY">
        <p id="output"></p>
      </div>
    

この例では、ユーザーがマウスを動かすたびに、event.clientX と event.clientY を使用してマウスの座標が取得され、指定した要素内に表示されます。onmousemove は非常にリアルタイムで動的なフィードバックを実現するため、ゲームやインタラクティブなUIでよく使用されます。