<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブ円形マップ調整版</title>
  <style>
    body {
      background-image: url("presentation1.png"); /* 画像 */
      background-size: cover;               /* 全画面 */
      background-attachment: fixed;         /* 固定 */
      background-position: center center;   /* 縦横中央 */
    }
    .responsive-img {
      width: 100%;
      height: auto;
    }
    .highlight-circle {
      position: absolute;
      /*background-color: rgba(0, 0, 255, 0.3); /* 青色の半透明 */*/
      border-radius: 50%;
      pointer-events: none; /* クリックを通過させる */
    }
    #map-container {
      position: relative;
    }
  </style>
</head>
<body>
  <div id="map-container">
    <img src="slide2.PNG" usemap="#ImageMap" alt="説明画像" class="responsive-img">
    <div id="highlight-container"></div>
  </div>
  <map name="ImageMap">
    <!-- データ属性で元の座標を保持 -->
    <area shape="circle" data-coords="90,440,60" href="slide3.html" alt="リンク1" />
    <area shape="circle" data-coords="240,440,60" href="slide4.html" alt="リンク2" />
    <area shape="circle" data-coords="380,440,60" href="slide4.html" alt="リンク3" />
    <area shape="circle" data-coords="530,440,60" href="slide4.html" alt="リンク4" />
    <area shape="circle" data-coords="680,440,60" href="slide4.html" alt="リンク5" />
  </map>

  <script>
    function resizeMap() {
      const img = document.querySelector('.responsive-img');
      const areas = document.querySelectorAll('map area');
      const highlightContainer = document.getElementById('highlight-container');

      // 元の画像サイズを正確に指定
      const originalWidth = 800;  // ここを画像の元の幅に変更
      const originalHeight = 1200; // ここを画像の元の高さに変更

      // 現在のスケールを計算
      const scaleX = img.clientWidth / originalWidth;
      const scaleY = img.clientHeight / originalHeight;

      // ハイライトをリセット
      highlightContainer.innerHTML = '';

      areas.forEach((area) => {
        // 元の座標を取得してスケール
        const originalCoords = area.dataset.coords.split(',').map(Number);
        let resizedCoords;

        if (area.shape === "circle") {
          // 円形領域: x, y 座標と半径をスケール
          const [x, y, radius] = originalCoords;
          const scaledX = Math.round(x * scaleX);
          const scaledY = Math.round(y * scaleY);
          const scaledRadius = Math.round(radius * Math.min(scaleX, scaleY));
          resizedCoords = [scaledX, scaledY, scaledRadius];

          // ハイライト円を作成
          const highlight = document.createElement('div');
          highlight.classList.add('highlight-circle');
          highlight.style.width = `${scaledRadius * 2}px`;
          highlight.style.height = `${scaledRadius * 2}px`;
          highlight.style.left = `${scaledX - scaledRadius}px`;
          highlight.style.top = `${scaledY - scaledRadius}px`;
          highlightContainer.appendChild(highlight);
        }

        area.coords = resizedCoords.join(',');
      });
    }

    // ページロード時とウィンドウサイズ変更時にマップをリサイズ
    window.addEventListener('load', resizeMap);
    window.addEventListener('resize', resizeMap);
  </script>
</body>
</html>
