Image map坐标异常：集成CSS后热区错位的修正咨询

Hey there! The misalignment of your image map hotspots is a classic issue caused by scaling the image with CSS while using coordinates based on the original image size. Let's break down why this happens and how to fix it properly.

Why the Hotspots Are Misaligned #

When you created the image map, the coords values were calculated based on the original pixel dimensions of your RZ_Karte.png (matching the 738px width in your code). But your CSS uses max-width: 100% to make the image responsive, which shrinks it to fit its container. The browser still tries to apply the original fixed-pixel coordinates to the scaled-down image—hence the offset and missing hotspots.

Solutions to Get Correct Coordinates #

1. Dynamic Coordinate Adjustment with JavaScript (Recommended for Responsive Layouts) #

This method automatically recalculates hotspot coordinates whenever the image size changes (like on window resize). Here's a ready-to-use script:

function adjustImageMap() {
  const img = document.getElementById('map-image');
  const mapName = img.getAttribute('usemap').slice(1); // Remove the # from usemap="#map"
  const map = document.querySelector(`map[name="${mapName}"]`);

  if (!img || !map) return;

  // Get original image dimensions (loaded from file)
  const originalWidth = img.naturalWidth;
  const originalHeight = img.naturalHeight;
  // Get current displayed dimensions of the image
  const displayWidth = img.clientWidth;
  const displayHeight = img.clientHeight;

  // Calculate scaling ratios
  const scaleX = displayWidth / originalWidth;
  const scaleY = displayHeight / originalHeight;

  // Update each area's coordinates
  map.querySelectorAll('area').forEach(area => {
    const originalCoords = area.getAttribute('coords').split(',').map(Number);
    const adjustedCoords = originalCoords.map((coord, index) => {
      // X coordinates (even indices) use scaleX, Y (odd) use scaleY
      return Math.round(index % 2 === 0 ? coord * scaleX : coord * scaleY);
    });
    area.setAttribute('coords', adjustedCoords.join(','));
  });
}

// Run on page load (wait for image to fully load)
window.addEventListener('load', adjustImageMap);
// Re-run when window is resized
window.addEventListener('resize', adjustImageMap);

How to Use:

• Add this script right before your closing </body> tag.
• It will automatically adjust hotspots whenever the image's displayed size changes, keeping them perfectly aligned.

2. Manually Recalculate Coordinates (For Fixed Layouts Only) #

If your layout is fixed (no responsive scaling), you can manually adjust the coords values using the scaling ratio:

1. Calculate the ratio between the image's displayed width and original width:
   scale = displayedWidth / originalWidth
   (Example: If original width is 738px and displayed width is 332px, scale = 332/738 ≈ 0.45)
2. Multiply every number in each coords attribute by this scale.
   (Example: Original coords 66, 694, 509, 1082 becomes 29, 312, 229, 487 after multiplying by 0.45)

This works but is not ideal for responsive sites—you'd have to recalculate if the layout ever changes.

3. Generate Percentage-Based Coordinates (Alternative Tool Approach) #

Some image map generators let you generate percentage-based coordinates instead of fixed pixels. These coordinates are relative to the image's size, so they stay aligned no matter how the image is scaled.

If you re-generate your image map with percentage coords, you won't need any extra code—just replace your existing <map> element with the new one.

内容的提问来源于Stack Exchange，提问作者Felix ccad