HTML代码中图像映射map标签的具体使用教程-html教程-PHP中文网

usemap="#name" 与的 name 值必须逐字节匹配（含大小写、空格），且 usemap 必须带 #；area 的 shape/coords 格式需严格符合规范，coords 基于原始图片尺寸，响应式场景推荐 svg 或 css+js 替代。

html代码中图像映射map标签的具体使用教程

usemap="#name" 和 `<map name="name"></map>` 必须逐字节匹配

浏览器不报错，但漏掉 #、大小写不一致、多一个空格，整个图像映射就静默失效。这是最常卡住人的地方。

usemap 的值必须以 # 开头，比如 usemap="#product-map"
<map></map> 的 name 属性值必须完全一致（不含 #），即 <map name="product-map"></map>
建议统一用小写字母 + 连字符命名，避免 ProductMap、productmap 等歧义写法
调试时右键图片 → “检查元素”，看是否能高亮到对应 <map></map>；如果没反应，优先查这个

`<area>` 的 `shape` 和 `coords` 格式不能填错

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

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

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

下载

shape="rect" → coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足 x1 且 <code>y1
shape="circle" → coords="cx,cy,r"：圆心 x/y + 半径 r，r 必须为正整数
shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."：顶点成对出现，总数必须是偶数；首尾点需手动重复闭合（如三角形要写 6 个值）
别用 shape="default" 做兜底——它会捕获所有未被其他 <area> 覆盖的点击，干扰调试

`<area>` 必须有 `href` 和 `alt`，且必须嵌套在 `<map></map>` 内

<area> 是空元素，不能自闭合（<area ...> 在 HTML5 中合法但易出错），更不能放在 <div> 或 <code><map></map> 外面——浏览器直接忽略。

href 不可省略：缺了就无法跳转；即使你后续用 JS 拦截，也应写 href="#" 或 href="javascript:void(0)"
alt 不可省略：缺失时 Chrome 控制台报 warning，屏幕阅读器跳过该区域，无障碍直接失效
移动端真机测试务必做：模拟器触控精度高，真机手指点击容易误判，热区边缘建议留至少 10px 间隙

响应式页面里 `coords` 会偏移，这不是 bug 是机制限制

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

强行用 JS 动态重算：监听 load 和 resize，读取缩放比后遍历所有 <area>，把每个 coords 数值乘以比例再赋值——成本高、易漏边角 case
更推荐替代方案：SVG（矢量图形，天然响应式）、或 CSS 定位 + JS 事件委托（灵活、易维护、支持悬停/动画等复杂交互）
如果项目已重度响应式，别硬扛原生 <map></map>；它只适合静态尺寸、固定布局的场景，比如后台管理页里的示意图