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

JavaScriptでマウスイベントを使用して画像のロールオーバーを表示するにはどうすればよいですか?


マウスイベントで画像のロールオーバーを表示するには、次のコードを実行してみてください-

<html>
   <head>
      <title>Rollover with a Mouse Event</title>
      <script>
         <!--
            if(document.images) {
               var image1 = new Image(); // Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image(); // Preload second image
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   <body>
      <p>Move your mouse over the image to see the result</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() コンストラクターは、 image1という新しい画像オブジェクトを作成してプリロードします 。
  • srcプロパティには、/ images/html.gifという外部画像ファイルの名前が割り当てられます。
  • 同様に、image2オブジェクトを作成し、このオブジェクトに/images/http.gifを割り当てました。
  • #(ハッシュマーク)はリンクを無効にして、ブラウザがクリックされたときにURLに移動しようとしないようにします。このリンクは画像です。
  • onMouseOver イベントハンドラーは、ユーザーのマウスがリンク上に移動するとトリガーされ、 onMouseOut イベントハンドラーは、ユーザーのマウスがリンク(画像)から離れるとトリガーされます。

  1. JavaScriptを使用して特定の要素でマウスイベントを無効にする方法は?

    以下は、JavaScriptを使用して特定の要素でマウスイベントを無効にするためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <st

  2. Matplotlibでマウスリリースイベントの座標を表示するにはどうすればよいですか?

    matplotlibでマウスリリースイベントの座標を表示するには、次の手順を実行できます- 図のサイズを設定し、サブプロット間およびサブプロットの周囲のパディングを調整します。 図とサブプロットのセットを作成します。 10の範囲で線をプロットします。 関数をバインドする*クリック* イベントへ*button_release_event * 。 イベントとそのxおよびyデータを出力します。 図を表示するには、 show()を使用します メソッド。 例 from matplotlib import pyplot as plt plt.rcParams['backend'] =