图片热区通过HTML的map和area标签实现，使用img标签的usemap属性关联map元素，map内用area定义矩形、圆形或多边形热区，坐标以图片左上角为原点，适用于导航图等场景，需注意可访问性与响应式适配。
在网页设计中，有时需要对一张图片的不同区域设置不同的链接，这种效果可以通过 HTML 的 map 和 area 标签实现。这种方式称为“图片热区”或“图像映射（Image Map）”，适用于导航图、地图、产品示意图等场景。
基本语法结构
使用 <img> 标签显示图片，并通过 usemap 属性关联一个 map 元素。map 元素内部用多个 area 定义可点击的热区。
<img src="image.jpg" alt="示意图" usemap="#mymap"><map name="mymap">
<area shape="rect" coords="x1,y1,x2,y2" href="page1.html" alt="区域一">
<area shape="circle" coords="cx,cy,r" href="page2.html" alt="区域二">
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="page3.html" alt="区域三">
</map>
热区形状与坐标说明
每个 area 标签通过 shape 和 coords 属性定义热区范围：
- rect（矩形）：coords="左上x,左上y,右下x,右下y"
- circle（圆形）：coords="圆心x,圆心y,半径"
- poly（多边形）：列出所有顶点坐标，按顺序连接成封闭区域
坐标以图片左上角为原点 (0,0)，向右为 x 轴正方向，向下为 y 轴正方向。可以使用图像编辑软件或在线工具获取精确坐标。
立即学习“前端免费学习笔记（深入）”；
实用技巧与注意事项
为了提升可用性和兼容性，建议：
- 为每个 area 添加 alt 属性，增强可访问性
- 测试热区是否准确覆盖目标区域，避免重叠或遗漏
- 在小屏幕设备上注意响应式问题，固定坐标可能失效
- 可结合 CSS 设置 hover 效果，如改变光标样式：
area { cursor: pointer; }
基本上就这些。掌握 map 与 area 的配合使用，就能轻松实现一张图片多个链接的效果，无需切图或 JavaScript。虽然现代前端有更多交互方案，但在静态页面中，图像映射依然简洁高效。
