area标签的shape和coords必须严格匹配：shape="rect"→coords="x1,y1,x2,y2"（x2>x1且y2>y1）；shape="circle"→coords="cx,cy,r"（r为正整数）；shape="poly"→coords="x1,y1,x2,y2,x3,y3..."（坐标对数为偶数，原点在图片左上角）。
area 标签的 shape 和 coords 怎么填？
图像映射依赖 <area> 的 shape 和 coords 属性精确定位可点击区域，这两个值必须严格匹配图像像素坐标，错一位就点不中。
常见组合有：
-
shape="rect"→coords="x1,y1,x2,y2"：左上角和右下角坐标，注意 x2 > x1 且 y2 > y1 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标加半径，单位是像素 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：按顺时针或逆时针顺序列出所有顶点，坐标对数必须为偶数
坐标原点在图片左上角（0,0），x 向右递增、y 向下递增。别凭感觉手写——用 FireShot、ImageMapster 或在线工具（如 mapedit.net）导出 coords 更可靠。
usemap 属性为什么总不生效？
最常踩的坑是 usemap 值和 <map></map> 的 name 不一致，或漏了 # 前缀。
立即学习“前端免费学习笔记（深入）”；
正确写法只有这一种模式：
<img src="planets.jpg" usemap="#planetmap" alt="HTML怎么做区域映射链接？超链接添加实用方法" > <map name="planetmap"> <area shape="circle" coords="100,100,30" href="sun.html"> </map>
关键点：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
usemap值必须以#开头，比如usemap="#planetmap" -
<map></map>的name属性值必须与之完全相同（不含#），且全页面唯一 -
<map></map>可放在任意位置，但不能嵌套在<img alt="HTML怎么做区域映射链接？超链接添加实用方法" >内 - 浏览器不校验图片尺寸是否匹配 coords，超界区域仍可点击（只是没视觉反馈）
响应式页面里 image map 还能用吗？
不能直接用。因为 coords 是固定像素值，当图片被 CSS 缩放、max-width: 100% 拉伸或 viewport 变化时，热区会严重偏移。
临时补救方式有限：
- 给
<img alt="HTML怎么做区域映射链接？超链接添加实用方法" >加width和height固定尺寸（禁用 fluid 缩放） - 用 JavaScript 监听
resize，按缩放比例重算所有coords（代码量大、性能差）
更现实的选择是换技术栈：
- 用
<svg></svg>替代：矢量图形天然响应式，<path></path>+<a></a>可绑定事件和 href - 用绝对定位 +
<div> 热区：配合 <code>pointer-events: auto和 JS 计算相对坐标 - 纯 CSS 区域划分（如 grid + :has()）目前兼容性不足，不推荐生产环境
- 去掉
href属性（但部分浏览器会忽略该<area>） - 加
href="javascript:void(0)"（不推荐，影响可访问性） - 加
aria-disabled="true"+ CSScursor: not-allowed+ JS 阻止默认行为（适合动态控制）
href 为空或指向 # 时会发生什么？
<area href="#"> 表现和 <a href="#"></a> 一样：点击后页面滚回顶部，不跳转也不触发任何行为。
这不是“禁用链接”的正确方式。真正需要禁用时，应该：
如果区域本意是触发 JS 功能（比如弹窗、高亮），建议保留有效 href（如 href="/popup-data"），再用 event.preventDefault() 拦截，这样对 SEO 和键盘用户更友好。
图像映射看似简单，但 coords 与实际像素强耦合、无响应式支持、调试困难这三点，让它在现代项目中基本只适用于静态文档或遗留系统维护。真要交互丰富，SVG 或 CSS+JS 组合才是更可控的选择。
