<map>-图像映射

<map> 标签用于定义客户端图像映射，即带有可点击区域的图像。图像映射允许用户通过点击图像的不同区域来触发不同的动作或链接。<map> 通常与 <img> 标签的 usemap 属性结合使用，并通过 <area> 标签定义具体的可点击区域。

<map> 标签的基本语法

<map> 标签的基本结构如下：

<img src="image.jpg" alt="示例图像" usemap="#mapName">
<map name="mapName">
  <area shape="rect" coords="x1,y1,x2,y2" href="url1" alt="区域1">
  <area shape="circle" coords="x,y,radius" href="url2" alt="区域2">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="url3" alt="区域3">
</map>

• name 属性为 <map> 标签定义名称，<img> 的 usemap 属性通过 # 符号引用该名称。
• <area> 标签定义图像中的可点击区域，支持多种形状（rect、circle、poly）。

<area> 标签的属性和形状

<area> 标签的 shape 属性支持以下三种形状：

矩形（rect）

矩形区域通过 coords 属性定义左上角 (x1,y1) 和右下角 (x2,y2) 的坐标。例如：

<img src="worldmap.jpg" alt="世界地图" usemap="#world">
<map name="world">
  <area shape="rect" coords="100,50,200,150" href="europe.html" alt="欧洲">
</map>

圆形（circle）

圆形区域通过 coords 属性定义圆心 (x,y) 和半径 radius。例如：

<img src="solarsystem.jpg" alt="太阳系" usemap="#solar">
<map name="solar">
  <area shape="circle" coords="300,150,50" href="sun.html" alt="太阳">
</map>

多边形（poly）

多边形区域通过 coords 属性定义多个顶点坐标 (x1,y1,x2,y2,...)。例如：

<img src="country.jpg" alt="国家地图" usemap="#country">
<map name="country">
  <area shape="poly" coords="10,20,50,30,40,80,20,60" href="region.html" alt="区域">
</map>

实际应用示例

示例1：导航菜单图像映射

假设有一张导航菜单的图片，点击不同区域跳转到不同页面：

<img src="navmenu.png" alt="导航菜单" usemap="#navmap">
<map name="navmap">
  <area shape="rect" coords="0,0,100,50" href="home.html" alt="首页">
  <area shape="rect" coords="100,0,200,50" href="about.html" alt="关于">
  <area shape="rect" coords="200,0,300,50" href="contact.html" alt="联系">
</map>

示例2：交互式地图

一张世界地图，点击不同国家显示详细信息：

<img src="worldmap.png" alt="世界地图" usemap="#worldmap">
<map name="worldmap">
  <area shape="poly" coords="120,50,150,70,180,60,200,90" href="france.html" alt="法国">
  <area shape="circle" coords="300,120,30" href="japan.html" alt="日本">
  <area shape="rect" coords="400,100,500,200" href="usa.html" alt="美国">
</map>

动态生成图像映射

可以通过 JavaScript 动态生成 <map> 和 <area> 标签。例如：

<img id="dynamicImage" src="dynamic.jpg" alt="动态图像">
<script>
  const map = document.createElement('map');
  map.name = 'dynamicMap';
  
  const area1 = document.createElement('area');
  area1.shape = 'rect';
  area1.coords = '0,0,100,100';
  area1.href = 'page1.html';
  area1.alt = '区域1';
  
  const area2 = document.createElement('area');
  area2.shape = 'circle';
  area2.coords = '150,150,50';
  area2.href = 'page2.html';
  area2.alt = '区域2';
  
  map.appendChild(area1);
  map.appendChild(area2);
  document.body.appendChild(map);
  
  document.getElementById('dynamicImage').usemap = '#dynamicMap';
</script>

图像映射的兼容性和注意事项

• 现代浏览器均支持 <map> 标签，但需确保坐标计算准确。
• 移动端设备可能对图像映射的点击区域支持不佳，建议结合触摸事件优化。
• 使用 alt 属性为每个 <area> 提供替代文本，提升可访问性。

图像映射与 SVG 的比较

SVG 也可以实现类似图像映射的效果，且支持更复杂的交互和动画。例如：

<svg width="500" height="300">
  <a href="france.html">
    <polygon points="120,50 150,70 180,60 200,90" fill="blue" />
  </a>
  <a href="japan.html">
    <circle cx="300" cy="120" r="30" fill="red" />
  </a>
</svg>

SVG 的优势在于矢量缩放和动态效果，而 <map> 更适合简单的静态图像映射。