图片热区通过HTML的map和area标签实现，使用img的usemap属性关联指定名称的热区地图，map内定义多个area区域，分别设置shape、coords、href和alt属性以创建可点击的不同形状区域，常用于导航或示意图，需注意坐标原点为图片左上角、响应式中坐标适配问题及添加alt文本提升可访问性，现代开发推荐考虑CSS+SVG替代方案。
在网页中，图片热区（Image Map）指的是在一张图片上定义多个可点击区域，每个区域可以链接到不同的URL。这种技术常用于导航图、地图或产品示意图等场景。通过HTML的 map 和 area 标签，可以轻松实现图片热区功能。
1. 使用 <img> 的 usemap 属性关联热区
要启用图片热区，首先需要在 img 标签中使用 usemap 属性，指向一个 map 元素的名称。名称前必须加井号（#）。
示例：<img src="floor-plan.jpg" alt="平面图" usemap="#roomMap">
这表示该图片将使用名为 "roomMap" 的热区定义。
2. 定义 <map> 和 <area> 区域
接下来使用 map 标签定义热区集合，其中每个 area 代表一个可点击区域。area 支持三种形状：矩形（rect）、圆形（circle）和多边形（poly）。
立即学习“前端免费学习笔记（深入）”；
关键属性说明：
- shape：区域形状（rect, circle, poly）
- coords：坐标值，根据形状不同格式不同
- href：点击后跳转的链接
- alt：替代文本，提升可访问性
- 矩形（rect）：left, top, right, bottom（例如：50,50,150,150）
- 圆形（circle）：center_x, center_y, radius（例如：100,100,50）
- 多边形（poly）：多个 x,y 坐标对（例如：60,30,90,60,60,90）
<map name="roomMap"> <area shape="rect" coords="50,50,150,150" href="kitchen.html" alt="厨房"> <area shape="circle" coords="250,100,40" href="bathroom.html" alt="卫生间"> <area shape="poly" coords="200,200,250,200,250,250,200,250" href="bedroom.html" alt="卧室"> </map>
3. 注意事项与最佳实践
虽然图片热区功能强大，但使用时需注意以下几点：
- 确保每个 area 都有 alt 文本，方便屏幕阅读器识别
- 坐标基于图片左上角为原点 (0,0)
- 图片尺寸变化时，coords 可能需要重新计算（响应式布局中较难维护）
- 现代开发中可考虑用 CSS + SVG 替代传统 image map，更灵活易维护
基本上就这些。只要正确设置 usemap、map name 和 area 的 coords，就能让一张图片的不同区域跳转到不同页面。不复杂但容易忽略细节，比如坐标顺序或alt信息。
