rect形状coords必须为“left,top,right,bottom”四个像素值，usemap与map的name须完全匹配（含#、大小写、连字符），响应式下需按naturalwidth/offsetwidth等动态重算全部4个坐标值。

rect形状的coords必须是4个像素值，顺序不能错

写 shape="rect" 时，coords 必须严格为 "left,top,right,bottom" 四个数字，且 left

• 错误示例：<area shape="rect" coords="100,50,20,80">（left=100 > right=20）→ 区域消失
• 正确写法：<area shape="rect" coords="20,50,100,80"> → 左上(20,50)，右下(100,80)
• 坐标系原点在图片左上角，单位是原始图像的像素，不是 CSS 渲染后的尺寸

usemap="#name" 和

这是最隐蔽也最常导致“点击没反应”的原因：大小写、空格、连字符、#号缺一不可。浏览器静默失败，不报错也不警告。

• <img usemap="#product-map"> 对应的
• 漏掉 #（如写成 usemap="product-map"）→ 整个
• name 值里含空格或中文？绝对不行，只允许字母、数字、连字符、下划线

响应式图片下矩形热区会偏移，必须手动重算 coords

CSS 缩放（比如 width: 100%; height: auto）不会自动缩放 <area> 的 coords。原始图 1200×800，页面显示为 600×400，那 coords="0,0,100,100" 实际仍按 1200×800 解析，点击位置会偏移到四分之一处。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 必须监听 img.addEventListener('load', updateCoords) 和 window.addEventListener('resize', updateCoords)
• 用 img.naturalWidth / img.naturalHeight 获取原始尺寸，再除以 img.offsetWidth / img.offsetHeight 得到缩放比
• 对每个 <area> 的 coords 字符串做解析：矩形需缩放全部 4 个值，不能只缩放 x 或只缩放 y
• 临时调试时加 border: 1px solid red 到 ，再用开发者工具截图比对热区是否对齐

area 标签必须带 href 和 alt，否则语义与行为双失效

缺 href，点击无跳转；缺 alt，不仅屏幕阅读器无法播报，旧版 Safari 甚至直接跳过该 <area> 元素。

• alt 不是可选的“辅助描述”，而是强制要求的语义属性，例如：alt="点击进入左侧产品详情"
• 如果只是想触发 JS 事件（而非跳转），也要保留 href="#" 或 href="javascript:void(0)"，再用 event.preventDefault() 阻止默认行为
• 禁用跳转但又不写 href，某些安卓 WebView 会完全忽略点击事件

实际项目里最容易被跳过的，是缩放比计算后对矩形 coords 的逐值重赋——很多人只改了前两个数，或者用同一个缩放比硬套所有方向，结果在宽高缩放比不同时（比如 max-width: 100%; height: 200px），热区就彻底漂移。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！