shape="circle"时coords必须为三个正整数：cx,cy,r，单位像素，原点在图片左上角；r>0且不超出图片边界，须嵌套于内，需用usemap正确关联。

用 的 shape="circle" 定义图片圆形热区，坐标必须按规范写

直接能用，但错一个数字或少一个逗号就完全不响应点击。coords 必须是三个用英文逗号分隔的整数：center_x,center_y,radius，单位是像素，原点在图片左上角。

• 必须带 usemap 属性，且值要和 的 name 严格一致（区分大小写）
• 必须嵌套在 内，不能放外面
• 半径不能为 0，否则区域不可点击；也不能超出图片边界，否则部分区域失效（浏览器不会自动裁剪）
• 如果图片用 CSS 缩放（比如 width: 100%），coords 仍按原始图片尺寸计算，不是渲染后尺寸

Chrome/Firefox/Safari 都支持 shape="circle"，但 IE8 及更早版本不支持

现代浏览器没问题，但如果你的项目还要兼容 IE8，得换方案：要么用 SVG 替代，要么用 JS 手动计算鼠标位置与圆心距离。IE9+ 已支持 shape="circle"，所以只要明确排除 IE8，就可以放心用。

• 检测方式：document.createElement('map').shape 在 IE8 返回 undefined
• 不建议用 shape="default" 模拟，它无法精确定义圆形范围
• 移动端 Safari 对 点击有约 300ms 延迟，可加 onclick="return false" 或用 touchstart 补救

coords 坐标怎么量？别靠肉眼估，要用开发者工具或图像编辑器

打开浏览器开发者工具，选中图片元素，看它的 naturalWidth 和 naturalHeight —— 这才是 coords 的参考尺寸。再用截图工具或 PS 标尺确认圆心和半径像素值。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 示例：一张 400×300 的图，圆心在 (200, 150)，半径 60，则 coords="200,150,60"
• 如果图片是响应式且宽高比固定，可用 JS 动态重设 coords，但注意：修改 的 coords 属性后，无需重新绑定事件，浏览器会自动生效
• 避免用百分比， 不支持 % 单位，写了也当 0 处理

点击没反应？优先检查这三处

90% 的问题出在这儿，而不是语法本身：

• 的 src 加载失败（控制台报 404），usemap 就失效
• 放在了 末尾，但 在前面，某些旧版浏览器会找不到 map
• 缺少 href 或 onclick —— 没交互行为的热区默认不可见、不可点；至少加 href="#" 或 onclick="doSomething();return false;"

复杂点在于：圆形区域边缘像素是否触发点击，取决于浏览器抗锯齿策略，同一张图在 Chrome 和 Safari 上可能有 1px 差异。真要精确到像素级，得切 SVG 或用 Canvas。