4.5 图像映射（Image Maps）——一张图片，多个可点击区域

什么是图像映射？

想象一张世界地图，点击不同国家会显示对应的信息——这就是图像映射的魔力！它允许你将单张图片划分成多个可点击区域，每个区域可以链接到不同页面或执行不同操作。

基础语法结构

<img src="地图.jpg" 
     alt="世界地图" 
     usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="203,68,285,128" 
        href="china.html" alt="中国">
  <area shape="circle" coords="338,209,30" 
        href="japan.html" alt="日本">
  <area shape="poly" coords="120,45,140,60,110,75" 
        href="korea.html" alt="韩国">
</map>

核心组件解析

1. <img>标签：必须添加usemap属性，值格式为#map名称常规的src和alt属性仍需保留
2. <map>容器：通过name属性与图片关联内部包含多个<area>标签
3. <area>热点区域：shape：形状类型（rect|circle|poly|default）coords：坐标点（不同形状格式不同）href：链接地址（也可用javascript:执行脚本）alt：必须提供的无障碍文本

坐标系统详解

坐标系以图片左上角为原点(0,0)：

获取坐标技巧：使用Photoshop「标尺工具」或在线工具如Image Map Generator

现代增强技巧

1. 响应式图像映射：

window.onresize = function() {
  // 根据图片缩放比例调整坐标
  const scale = image.offsetWidth / image.naturalWidth;
  areas.forEach(area => {
    area.coords = originalCoords.map(coord => coord * scale).join(',');
  });
};

1. CSS交互效果：

area:hover + .tooltip {
  display: block; /* 显示对应提示框 */
}

1. SVG替代方案（更现代的做法）：

<svg viewBox="0 0 500 300">
  <a href="china.html">
    <polygon points="203,68 285,68 285,128 203,128" />
  </a>
</svg>

无障碍访问要点

1. 每个<area>必须提供有意义的alt文本
2. 复杂图像映射应额外提供文字链接版本
3. 可配合<figure>和<figcaption>增强语义

适用场景与替代方案

推荐使用场景：

• 地理信息系统的交互地图
• 产品拆解图（如点击汽车部件查看详情）
• 游戏中的场景互动

现代替代方案：

1. 使用CSS+div的定位方案
2. 采用SVG实现矢量可点击区域
3. 通过Canvas实现动态交互

完整案例：交互式人体解剖图

<figure>
  <img src="anatomy.jpg" 
       alt="人体解剖示意图" 
       usemap="#anatomyMap">
  <map name="anatomyMap">
    <area shape="circle" coords="125,215,20" 
          href="#heart" alt="心脏" 
          data-tooltip="点击了解心脏结构">
    <area shape="poly" coords="85,145,105,160,95,180,70,170" 
          href="#brain" alt="大脑"
          data-tooltip="点击了解大脑结构">
  </map>
  <figcaption>点击身体部位查看详细信息</figcaption>
</figure>

<script>
  // 显示/隐藏工具提示
  document.querySelectorAll('area').forEach(area => {
    area.addEventListener('mouseover', function() {
      showTooltip(this.dataset.tooltip);
    });
  });
</script>

图像映射是一项经典但需要谨慎使用的技术。在现代Web开发中，建议优先考虑SVG等替代方案，但在需要快速实现复杂图片交互时，它仍然是值得掌握的实用技能!