はじめに

Webページの特定のオブジェクト(テーブルのセルなど)にマウスポインターを置いた場合、そのオブジェクトと紐づいている情報を用いて、マウスポインターの横に何かのプレビューを表示する方法を紹介します。
表示されるプレビューは、マウスポインターの位置を追いかけていきます。

プレビュー表示の例

プレビュー表示のサンプルコード

例として作成したサンプルコードは、HTML、JavaScript、CSSの3つのファイルで構成されます。
Webページサンプルには、1つのテーブルに3つのセルがあり、各セルにマウスポインターを置くと、マウスポインターの位置に合わせてプレビューが表示されます。
JavaScriptコードには「jQuery」ライブラリーを使いました。

サンプルのフォルダ構成

サンプルコードや画像ファイルは以下のように構成されています。

フォルダ構成

sample
  ├─ index.html
  ├─ script.js
  ├─ style.css
  └─ img
      ├─ bg1.jpg
      ├─ bg2.jpg
      └─ bg2.jpg

HTMLコードサンプル

HTMLコードは、以下のように作成しました。
各セルには、画像表示で使う情報(img_src、img_description)が入っています。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Preview</title>
  </head>

  <body>
    <!-- 表を作成する -->
    <table id="image-table" border="1">
      <tbody>
        <tr>
          <td width="100" img_src="bg1.jpg" img_description="お花畑">背景 1</td>
        </tr>
        <tr>
          <td width="100" img_src="bg2.jpg" img_description="海">背景 2</td>
        </tr>
        <tr>
          <td width="100" img_src="bg3.jpg" img_description="夜景">背景 3</td>
        </tr>
      </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

JavaScriptコードサンプル

JavaScriptコードは以下のように作成しました。
マウスポインターが以下の動作のコードが作成されています。

マウスポインターがセルに位置した場合、プレビューを表示
マウスポインターがセルに位置しない場合、プレビューを非表示
マウスポインターの位置に合わせてプレビューを移動

script.js

$().ready(function () {
  imgPreview(this);
});

function imgPreview() {
  var xOffset = 10;
  var yOffset = 20;
  var imgWidth = 320;
  var imgHeight = 180;

  // マウスポインターが位置しているセルに該当する画像のプレビューを表示する
  $("#image-table td").hover(
    function (e) {
      var imgId = $(this).closest("td").attr("img_src");
      var imgValue = $(this).closest("td").attr("img_description");

      $("body").append(
        `<p id="preview"><img src="./img/${imgId}" width="${imgWidth}" height="${imgHeight}"><br>${imgValue}</p>`
      );
      $("#preview")
        .css("top", e.pageY - xOffset + "px")
        .css("left", e.pageX + yOffset + "px")
        .fadeIn("fast");
    },
    // マウスポインターがセルに位置しないと、プレビューを非表示する
    function () {
      $("#preview").remove();
    }
  );

  // マウスポインターの位置に合わせてプレビューを表示を移動する
  $("#image-table td").mousemove(function (e) {
    var previewWidth = $("#preview").width();
    var previewHeight = $("#preview").height();

    if (e.pageY + previewHeight > $(window).innerHeight() + $(document).scrollTop()) {
      $("#preview").css("top", e.pageY - xOffset - previewHeight + "px");
    } else {
      $("#preview").css("top", e.pageY - xOffset + "px");
    }

    if (e.pageX + previewWidth > $(window).innerWidth() + $(document).scrollLeft()) {
      $("#preview").css("left", e.pageX - yOffset - previewWidth + "px");
    } else {
      $("#preview").css("left", e.pageX + yOffset + "px");
    }

    if (
      e.pageY + previewHeight > $(window).innerHeight() + $(document).scrollTop() &&
      e.pageX + previewWidth > $(window).innerWidth() + $(document).scrollLeft()
    ) {
      $("#preview")
        .css("top", e.pageY - xOffset - previewHeight - xOffset + "px")
        .css("left", e.pageX - yOffset - previewWidth + "px");
    }
  });
}

CSSコードサンプル

CSSファイルは以下のように作成しました。
プレビューのスタイルのみ作成しました。

style.css

#preview {
    position: absolute;
    border: 1px solid #ccc;
    background: #333;
    padding: 5px;
    display: none;
    color: #fff;
    z-index: 100;
  }

JavaScriptを使ってマウスポインターにプレビューを表示する