<map>-图像映射

<map> 标签在 HTML 中用于定义客户端图像映射，允许用户通过点击图像的不同区域跳转到不同的链接或执行其他操作。图像映射通常与 <area> 标签结合使用，通过坐标定义可点击区域，实现交互式图像导航。

<map> 标签的基本语法

<map> 标签需要与 <img> 标签配合使用，并通过 usemap 属性关联。<map> 标签本身不显示任何内容，而是作为 <area> 标签的容器。基本结构如下：

<img src="image.jpg" alt="示例图像" usemap="#exampleMap">
<map name="exampleMap">
  <area shape="rect" coords="x1,y1,x2,y2" href="link1.html" alt="区域1">
  <area shape="circle" coords="x,y,radius" href="link2.html" alt="区域2">
</map>

• name 属性定义映射名称，与 <img> 的 usemap 属性值对应（需加 # 前缀）。
• <area> 标签定义可点击区域，支持 rect（矩形）、circle（圆形）、poly（多边形）和 default（默认区域）。

<area> 标签的坐标系统

坐标系统以图像左上角为原点 (0,0)，向右为 x 轴正方向，向下为 y 轴正方向。坐标值的单位是像素。

矩形区域 (shape="rect")

• 语法：coords="x1,y1,x2,y2"
• (x1,y1) 是矩形左上角坐标，(x2,y2) 是右下角坐标。
• 示例：定义一个从 (10,10) 到 (100,50) 的矩形区域：

  <area shape="rect" coords="10,10,100,50" href="rect.html" alt="矩形区域">
  

圆形区域 (shape="circle")

• 语法：coords="x,y,radius"
• (x,y) 是圆心坐标，radius 是半径。
• 示例：定义一个圆心在 (150,50)、半径为 40 的圆形区域：

  <area shape="circle" coords="150,50,40" href="circle.html" alt="圆形区域">
  

多边形区域 (shape="poly")

• 语法：coords="x1,y1,x2,y2,...,xn,yn"
• 按顺序定义多边形的各个顶点坐标。
• 示例：定义一个三角形的三个顶点 (200,10)、(250,50) 和 (200,90)：

  <area shape="poly" coords="200,10,250,50,200,90" href="poly.html" alt="多边形区域">
  

实际应用示例

示例 1：地图导航

假设有一张世界地图图像，点击不同国家跳转到对应国家的介绍页面：

<img src="world-map.jpg" alt="世界地图" usemap="#worldMap">
<map name="worldMap">
  <area shape="poly" coords="100,50,150,80,120,120" href="france.html" alt="法国">
  <area shape="circle" coords="300,200,30" href="japan.html" alt="日本">
  <area shape="rect" coords="400,150,500,250" href="usa.html" alt="美国">
</map>

示例 2：产品展示

在电商网站中，点击产品图片的不同部分查看详细信息：

<img src="smartphone.jpg" alt="智能手机" usemap="#phoneMap">
<map name="phoneMap">
  <area shape="rect" coords="50,100,150,150" href="camera.html" alt="摄像头">
  <area shape="rect" coords="200,100,300,150" href="screen.html" alt="屏幕">
</map>

动态生成图像映射

通过 JavaScript 可以动态生成 <map> 和 <area> 标签。例如，根据用户输入实时更新可点击区域：

<img id="dynamicImage" src="dynamic.jpg" alt="动态图像" usemap="#dynamicMap">
<map name="dynamicMap" id="dynamicMap"></map>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const map = document.getElementById('dynamicMap');
    const area = document.createElement('area');
    area.shape = 'rect';
    area.coords = '10,10,100,100';
    area.href = 'dynamic-link.html';
    area.alt = '动态区域';
    map.appendChild(area);
  });
</script>

响应式图像映射的挑战

传统图像映射的坐标是固定像素值，在响应式设计中可能失效。解决方案包括：

1. 使用 JavaScript 动态计算坐标：

   function adjustMapCoords() {
     const img = document.getElementById('responsiveImage');
     const scale = img.width / img.naturalWidth;
     const areas = document.querySelectorAll('area');
     areas.forEach(area => {
       const coords = area.getAttribute('data-original-coords').split(',');
       const scaledCoords = coords.map(coord => Math.round(coord * scale));
       area.coords = scaledCoords.join(',');
     });
   }
   window.addEventListener('resize', adjustMapCoords);
   

2. 使用 SVG 替代 <map> 标签（更灵活的响应式方案）。

无障碍访问注意事项

• 始终为 <area> 添加 alt 属性，描述区域功能。
• 如果图像映射用于导航，确保键盘可操作（通过 tabindex 属性）。
• 提供替代文本链接，确保屏幕阅读器用户能理解内容。

<map name="accessibleMap">
  <area shape="rect" coords="0,0,100,100" href="about.html" alt="关于我们" tabindex="0">
  <area shape="rect" coords="100,0,200,100" href="contact.html" alt="联系方式" tabindex="0">
</map>
<p>
  替代导航：<a href="about.html">关于我们</a> | <a href="contact.html">联系方式</a>
</p>