area标签shape="circle"需配coords="cx,cy,r"三个像素整数，原点在图片左上角；usemap与map name须严格一致（含大小写、#号）；响应式下需js重算或改用svg。

直接用 <area> 标签配合 shape="circle" 就能做圆形点击区域，不需要 JS 或 CSS 模拟 —— 但坐标写错、usemap 关联失败、图片缩放后失效，这三类问题占了实际使用中 90% 的报错。

circle coords 坐标怎么写才对

coords 必须是三个整数，顺序是：圆心x,圆心y,半径，单位像素，原点在图片左上角（0,0）。不是百分比，不是 CSS 像素，也不是 relative 值。

• 错误写法：coords="50%,50%,25%" 或 coords="center,center,25"
• 正确写法：coords="120,90,25" 表示圆心在距左 120px、距上 90px 处，半径 25px
• 用 Photoshop 或浏览器开发者工具的「截图测量」功能取值最稳，手动估算容易偏移 5–10px 导致点不中

usemap 和 map name 必须严格匹配

<img usemap="#mycircle"> 和 <map name="mycircle"></map> 的字符串必须完全一致 —— 包括大小写、有无空格、是否带 #。name 属性不带 #，usemap 属性必须带 #。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 常见错误：usemap="#MyCircle" 对应 name="mycircle"（大小写不一致）
• 更隐蔽的坑：usemap="#hotmap "（末尾空格）和 name="hotmap" 不匹配
• 调试建议：打开浏览器开发者工具，检查 <map></map> 是否出现在 DOM 中，且 name 值与 usemap 的 # 后内容一字不差

响应式下圆形热区会失效怎么办

原生 <area shape="circle"> 的坐标是固定像素值，图片用 width: 100% 或 max-width 缩放时，热区不会跟着缩放，点就偏了。

• 简单场景：图片尺寸固定（如 banner 图宽高明确），可直接用，不用额外处理
• 适配移动端：必须用 JS 动态重算坐标，推荐用 rwd-image-maps 库，它会在窗口 resize 时按比例缩放 coords
• 替代方案：改用 SVG，<circle cx="..." cy="..." r="..."></circle> 天然支持百分比和 viewBox 缩放，但需要把图片转为 <image></image> 嵌入 SVG

真正麻烦的不是画圆，而是坐标和响应式之间的错位 —— 很多人测完桌面端就上线，结果 iOS Safari 点不中，就是因为没处理缩放重映射。

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