area标签配合map实现图片热点链接需严格匹配usemap与map的name值、正确设置shape和coords格式、确保href为有效URL且alt非空，响应式下须用JS动态重算coords。

area 标签配合 map 实现图片热点链接，**不是“写了就能点”，而是“错一个字符就完全失效”**。浏览器不会报错，只静默忽略——你反复点击没反应，大概率是匹配或格式问题。

usemap="#name" 和 map name="name" 必须逐字节一致

这是 90% 热区失效的根源。大小写、连字符、空格、#号缺一不可。

• usemap="#floor-plan" ✅ 必须配 <map name="floor-plan">
• usemap="floor-plan" ❌ 漏 #，整个映射被忽略
• usemap="#Floor-Plan" ❌ 大小写不一致，断连
• <map id="floor-plan"> ❌ usemap 不认 id，只认 name

调试时直接在开发者工具里复制粘贴比对，别靠肉眼扫。

shape 和 coords 格式必须严格配对

coords 不是“随便填的数字”，它由 shape 类型决定解析逻辑；填错一位，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足 x1 < x2 且 y1 < y2
• shape="circle" → coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0，不能是小数或 0）
• shape="poly" → coords="x1,y1,x2,y2,x3,y3,x1,y1"：顶点成对出现，总数必须为偶数；首尾点建议手动重复闭合，否则不是封闭区域
• coords 中只允许数字和英文逗号，Photoshop/Figma 导出后务必删掉空格、换行、中文标点

href 必须是有效 URL，alt 不可省略

area 的 href 不支持纯锚点跳转，href="#" 或 href="#section" 在多数浏览器中会失效或触发页面跳动。

立即学习“前端免费学习笔记（深入）”；

• ✅ 支持：href="./detail.html"、href="javascript:void(0)"（配合 JS 处理）
• ❌ 不支持：href="#"、href="#detail"、href=""
• alt 是强制属性，不可为空字符串；它是屏幕阅读器理解区域用途的唯一依据，比如 alt="点击进入厨房详情"

响应式缩放下 coords 必须用 JS 动态重算

coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要用了 width、max-width 或 transform: scale()，热区立刻偏移。

• 原始图 1200×800，coords="0,0,100,100" 是左上角 100×100 区域；缩到 375px 宽后，该区域在屏幕上仅约 31×21px，低于触控最小推荐尺寸 44×44px
• 没有纯 HTML/CSS 方案能自动适配；可靠解法是监听 resize 和 load 事件，用缩放比重算所有 coords 值
• 如果项目重度响应式，优先考虑改用 SVG 矢量热区——它天然支持缩放，无需 JS 补偿

真正卡住人的从来不是“怎么写”，而是“为什么写了没反应”。最常被忽略的是：图片在 Shadow DOM 里时，外部 map 默认不可见；area 脱离 map 直接子节点位置（比如套了 div），所有浏览器都会静默忽略。