用和定义图片点击区域需配对与，设shape（rect/circle/poly）和基于原图左上角的整数coords，缩放时坐标失效，须保持原始尺寸或改用SVG。
怎么用 <map></map> 和 <area> 定义图片点击区域
图片映射（image map）不是靠 JS 计算坐标，而是靠 HTML 原生的 <map></map> + <area> 组合。核心是：给 <img alt="HTML怎么修改图片映射的点击区域" > 加 usemap 属性，指向一个 <map name="xxx"></map>，里面用多个 <area> 描述可点击区域。
常见错误是 usemap 值漏掉开头的 #，比如写成 usemap="mymap" 而不是 usemap="#mymap"，浏览器就完全忽略映射。
-
<area shape="rect" coords="x1,y1,x2,y2">：左上+右下坐标，顺序不能反 -
<area shape="circle" coords="cx,cy,r">：圆心+半径，单位都是像素 -
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...">：按顺时针或逆时针列顶点，至少 3 对坐标 - 所有
coords值必须是整数，小数会被截断（如10.7→10）
coords 坐标系以哪为原点？缩放后还准吗
坐标系原点在图片左上角（0,0），x 向右、y 向下。但关键陷阱是：坐标值绑定的是图片原始尺寸，不是显示尺寸。如果用 CSS 或 width/height 缩放了图片，<area> 区域不会自动缩放，点击会偏移。
- 解决办法只有两种：一是让图片不缩放（
width/height不设、或设为原始值）；二是用 JS 动态重算coords（需监听resize和图片加载完成） - 用
object-fit: contain或background-image模拟图片时，<map></map>完全无效——它只对<img alt="HTML怎么修改图片映射的点击区域" >标签生效 - 响应式页面中，建议优先用 SVG 替代 image map，SVG 的
<path></path>和<rect></rect>天然支持缩放和 viewBox
怎么调试 <area> 区域是否生效
浏览器开发者工具不会高亮 <area> 区域，肉眼无法直接验证。最可靠的方法是加 href 或 onclick 并观察行为：
立即学习“前端免费学习笔记（深入）”；
- 给每个
<area>加临时href="#test1"，点击看 URL 是否跳转，确认区域是否被识别 - 用
onclick="console.log('hit area1'); return false;"替代href，避免页面跳动 - Chrome/Firefox 的元素检查器里，
<area>标签本身不可见，但鼠标悬停在图片对应位置时，检查器会高亮它（需确保usemap正确绑定） - 注意：部分广告拦截插件或隐私模式会禁用
<area>的href跳转，但onclick通常不受影响
为什么点击没反应？几个硬性前提必须满足
<map></map> 不是独立组件，它依赖三个条件同时成立才能工作：
-
<img alt="HTML怎么修改图片映射的点击区域" >必须有src属性且图片成功加载（onload触发后才可用）；404 图片下<area>无效 -
usemap的值（如#mymap）必须与<map name="mymap"></map>的name完全一致，大小写敏感 -
<map></map>必须在 DOM 中位于<img alt="HTML怎么修改图片映射的点击区域" >同一文档内（不能跨 iframe，也不能用document.write动态插入后忘记关联） - 若图片是 base64 或 data URL，
<area>仍有效；但若图片通过 CSScontent伪元素插入，则整个机制失效
复杂点在于：area 区域没有视觉反馈，出问题时既不像按钮那样能 hover 看样式，也不报错。最稳妥的做法，是在开发阶段用带边框的占位图 + 固定尺寸 + 手动计算 coords，验证通过后再换正式图。
