usemap与map的name必须逐字节匹配（含#、大小写、符号），coords基于原始图片尺寸，shape与coords格式须严格对应，area必须嵌套于map内且href、alt不可省略。

usemap 和 map 的 name 必须逐字节匹配

浏览器只认 usemap="#product-map" 这种写法，漏掉 #、大小写不一致、多一个空格，整个热区就静默失效——控制台不报错，图片点不动，检查元素也看不到高亮关联。

常见错误现象：usemap="product-map"（缺 #）、usemap="#Product-Map" 与 混用（大小写错）、usemap="#product_map" 和 name="product-map"（下划线 vs 连字符）。

• 统一用小写字母 + 连字符命名，例如 name="floor-plan"，对应 usemap="#floor-plan"
• 标签建议同时写 id 和 name，兼顾 HTML5 兼容性与 JS 查找便利性
• 必须出现在 内可渲染位置，不能藏在 或注释里

shape 和 coords 格式必须严格对应

coords 不是“随便填的像素”，而是由 shape 决定的固定格式；填错一位，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。

常见错误现象：shape="rect" 却写了 6 个坐标；shape="circle" 的半径为 0 或负数；shape="poly" 坐标总数是奇数（比如 5 个数字）导致 Safari 直接忽略该区域。

• shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足 x1 且 y1
• shape="circle" → coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0）
• shape="poly" → coords="x1,y1,x2,y2,x3,y3,...,xn,yn"：坐标成对出现，总数必须是偶数；首尾点无需手动重复闭合（现代浏览器自动连线）
• 别用 shape="default" 做兜底——它会捕获所有未被其他 area 覆盖的点击，干扰调试

href 和 alt 是强制属性，不能省略

是空元素，不闭合（ 是错的），但它必须嵌套在 内部，且 href 和 alt 缺一不可。没 href，点击无跳转；没 alt，屏幕阅读器跳过该区域，Chrome 控制台还会报 warning。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

常见错误现象：写 href="#" 或 href="" 导致跳转失败或触发 404 请求；纯锚点如 href="#section1" 在部分浏览器中不兼容，尤其当目标不在当前页时。

• href 必须是有效 URL，例如 href="./detail.html#speaker" 或 href="javascript:void(0)"（配合 JS 处理）
• alt 不是可选描述，而是可访问性必需项，应准确说明功能，例如 alt="点击进入耳机参数页"
• 不要把 放在
  或其他容器里——它必须是 的直接子节点

  响应式下 coords 会错位，必须用 JS 重算

  coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如 max-width: 100% 或 width: 50%），热区立刻偏移——这不是 bug，是原生机制限制。

  移动端尤其明显：一张 1200×800 的图缩到 375px 宽，coords="0,0,100,100" 实际只占屏幕约 31×21px，远低于触控推荐最小尺寸 44×44px。

  • 监听 img.addEventListener('load', updateCoords) 和 window.addEventListener('resize', updateCoords)
  • 在 updateCoords() 中计算缩放比：scaleX = img.offsetWidth / img.naturalWidth，同理得 scaleY
  • 遍历所有 area，解析其原始 coords 字符串，将每个数值乘以对应方向缩放比后重新赋值给 area.coords
  • 如果项目重度响应式，优先考虑改用 SVG 矢量热区——天然支持缩放，无需手动重算

  实际操作中最容易被忽略的，是 coords 值永远绑定原始图片尺寸这个硬约束。很多人花几小时调坐标，却没意识到问题出在 CSS 缩放上。