shape="circle"时coords必须为三个正整数：cx,cy,r，单位像素，原点在图片左上角；r>0且不超出图片边界，须嵌套于内，需用usemap正确关联。
用 <area> 的 shape="circle" 定义图片圆形热区，坐标必须按规范写
直接能用，但错一个数字或少一个逗号就完全不响应点击。coords 必须是三个用英文逗号分隔的整数：center_x,center_y,radius，单位是像素，原点在图片左上角。
-
<img alt="如何在图片上定义圆形的点击区域_AREA标签SHAPE设为CIRCLE" >必须带usemap属性，且值要和<map></map>的name严格一致（区分大小写） -
<area>必须嵌套在<map></map>内，不能放外面 - 半径不能为 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 对
<area>点击有约 300ms 延迟，可加onclick="return false"或用touchstart补救
coords 坐标怎么量？别靠肉眼估，要用开发者工具或图像编辑器
打开浏览器开发者工具，选中图片元素，看它的 naturalWidth 和 naturalHeight —— 这才是 coords 的参考尺寸。再用截图工具或 PS 标尺确认圆心和半径像素值。
- 示例：一张 400×300 的图，圆心在 (200, 150)，半径 60，则
coords="200,150,60" - 如果图片是响应式且宽高比固定，可用 JS 动态重设
coords，但注意：修改<area>的coords属性后，无需重新绑定事件，浏览器会自动生效 - 避免用百分比，
<area>不支持%单位，写了也当 0 处理
点击没反应？优先检查这三处
90% 的问题出在这儿，而不是语法本身：
-
<img alt="如何在图片上定义圆形的点击区域_AREA标签SHAPE设为CIRCLE" >的src加载失败（控制台报 404），usemap就失效 -
<map></map>放在了末尾，但<img alt="如何在图片上定义圆形的点击区域_AREA标签SHAPE设为CIRCLE" >在前面，某些旧版浏览器会找不到map -
<area>缺少href或onclick—— 没交互行为的热区默认不可见、不可点；至少加href="#"或onclick="doSomething();return false;"
复杂点在于：圆形区域边缘像素是否触发点击，取决于浏览器抗锯齿策略，同一张图在 Chrome 和 Safari 上可能有 1px 差异。真要精确到像素级，得切 SVG 或用 Canvas。
