JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのマウスイベントを使って画像のロールオーバーを実装する方法

マウスイベントを利用して画像のロールオーバー（マウスを重ねたときに画像が切り替わる効果）を実装するには、以下のコードを参考にしてください。

サンプルコード

<html>
   <head>
      <title>マウスイベントによるロールオーバー</title>
      <script>
         <!--
            if(document.images) {
               var image1 = new Image(); // 1枚目の画像をプリロード
               image1.src = "/images/html.gif";
               var image2 = new Image(); // 2枚目の画像をプリロード
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   <body>
      <p>画像にマウスを重ねると結果を確認できます</p>

      <a href = "#" onMouseOver = "document.myImage.src = image2.src;" onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>

コードの解説

このサンプルでは、アニメーションのような画像切り替えを自動的に実現するために、以下の仕組みを利用しています。

  • ページ読み込み時にif文によって、ブラウザがimageオブジェクトに対応しているかどうかをチェックします。対応していない場合、このブロック内の処理は実行されません。
  • Image()コンストラクタを使って、image1という新しい画像オブジェクトを作成し、事前に読み込んでおきます。
  • srcプロパティに外部画像ファイル「/images/html.gif」のパスを割り当てます。
  • 同様の手順でimage2オブジェクトを作成し、「/images/http.gif」を割り当てています。
  • href属性の#（ハッシュ記号）はリンクを無効化するためのもので、クリックしてもブラウザが別のURLへ移動しないようにしています。このリンクの中身は画像です。
  • onMouseOverイベントハンドラは、ユーザーのマウスがリンク（画像）上に乗った瞬間に発生し、onMouseOutイベントハンドラは、マウスがリンクから離れた瞬間に発生します。これにより、画像が切り替わるロールオーバー効果が実現されます。

補足：モダンな実装について

上記の方法は古典的なテクニックですが、現在ではCSSの:hover擬似クラスを使えば、JavaScriptなしでも同じロールオーバー効果をより簡単に実装できます。また、複数の画像を扱う場合や動的な処理が必要な場合は、addEventListenerを使ったイベント登録や、mouseenter・mouseleaveイベントの活用も検討するとよいでしょう。

  1. JavaScriptで特定の要素のマウスイベントを無効化する方法【pointer-eventsプロパティ活用】

    JavaScriptを使って特定の要素上でマウスイベントを無効にする方法 Webページの開発において、特定の要素に対してクリックやホバーなどのマウス操作を一時的に無効にしたいケースがあります。JavaScriptでは、要素の style.pointerEvents プロパティを操作することで、マウスイベントの有効・無効を簡単に切り替えることができます。 pointer-events は本来CSSのプロパティですが、JavaScriptから動的に変更することも可能です。値を none に設定するとその要素はマウス操作を受け付けなくなり、auto に戻すと再びイベントが有効になります。 実装例（

  2. 【Matplotlib】マウスリリースイベントでクリック位置の座標を表示する方法

    Matplotlibでは、button_release_event（マウスボタンを離した瞬間に発生するイベント）を活用することで、グラフ上でマウスを操作した位置の座標を簡単に取得できます。本記事では、その具体的な実装手順をサンプルコード付きで解説します。 実装手順 図のサイズ設定： figureサイズを指定し、サブプロット間および周囲のパディングを自動調整します。 図とサブプロットの作成： plt.subplots() を使ってfigureとaxesを生成します。 データの描画： range(10) を使って0〜9の範囲の折れ線グラフを描画します。 イベントのバインド： コールバック関数