HTML图片热区需用<img>的usemap属性与<map name>严格匹配，<area>定义rect/circle/poly形状及基于原图左上角的像素坐标；响应式下需JS动态换算coords，或改用SVG方案。
用 <map> 和 <area> 定义图片热区
HTML 原生支持为一张图片划分多个可点击区域，核心是 <img> 的 usemap 属性配合 <map> 元素。关键不是给图片加事件监听，而是声明式地定义坐标区域。
必须确保：img 的 usemap 值（如 "#mymap"）与 <map> 的 name 属性严格匹配，且二者在同一个文档中；<map> 必须在 <img> 后面或同级上下文中（不能嵌套在 <img> 内）。
-
shape可选"rect"（x1,y1,x2,y2）、"circle"（cx,cy,r）、"poly"（x1,y1,x2,y2,x3,y3,...） -
coords值必须是纯数字，逗号分隔，无空格；浏览器按 shape 类型解析坐标顺序 - 所有坐标基于图片左上角为 (0,0)，单位是像素，且以图片原始尺寸为基准——缩放后坐标仍按原图计算
响应式图片下 <area> 坐标失效怎么办
当 <img> 使用 width/height 或 CSS 缩放时，<area> 仍按原始分辨率匹配，导致点击偏移。这不是 bug，是规范行为。
没有自动适配方案，必须手动换算：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 若用
width="50%"且原始宽为 1000px，当前显示宽为视口一半，则缩放比 = 当前显示宽 ÷ 1000；所有coords乘以该比值并取整 - 更可靠的是用 JS 动态重设：监听
window.resize，读取img.naturalWidth和img.clientWidth算出比例，再遍历document.querySelectorAll("area")更新coords - 避免用
background-image+div模拟，因为<map>只对<img>生效
<area> 的 href 和 onclick 能共存吗
可以，但行为有优先级：href 会触发跳转，覆盖 onclick 默认行为；想执行 JS 逻辑又不跳转，必须显式 return false 或调用 event.preventDefault()。
常见错误是写成 onclick="doSomething();" 却没阻止默认跳转，结果页面闪退。正确写法：
<area shape="rect" coords="10,10,50,50" href="/page" onclick="doSomething(); return false;" >
-
target属性仍有效（如target="_blank"），和onclick不冲突 - 如果只要 JS 行为，
href设为"#"或"javascript:void(0)"，但必须加return false，否则可能跳到页首 - 现代写法倾向用 JS 绑定事件：获取
area元素后.addEventListener("click", handler)，更易维护
替代方案：SVG <image> + <path> 更灵活
当热区形状复杂（比如不规则轮廓、贝塞尔曲线）、需要动画或响应式适配时，<map> 很快力不从心。SVG 是更可控的选择。
把图片作为 SVG 的 <image>，再用 <path> 或 <polygon> 叠加可点击区域，所有坐标天然基于 SVG viewBox，缩放自动适配：
<svg viewBox="0 0 800 600">
<image href="photo.jpg" width="800" height="600"/>
<path d="M100,100 L200,100 L150,200 Z" fill="none" stroke="none" onclick="alert('triangle!')"/>
</svg>
- SVG 区域支持
pointer-events: visiblePainted等精细控制 - 缺点是 SEO 友好性略低，且需额外处理图片加载失败的 fallback
- 不推荐用 Canvas 模拟热区——无法被屏幕阅读器识别，也难做语义化焦点管理
热区本质是“坐标映射”，<map> 简单直接，但一旦涉及缩放、动态更新或复杂路径，就得切换思路——别硬撑，SVG 或 Canvas+坐标转换才是实际解法。
