HTML怎么做图片热区_html map area图片热区链接【经验分享】

顺亿

2026-10-01 • 👁 0人浏览过

用和给图片加可点击区域需两步：先在中用usemap="#name"关联，再在内用定义rect/circle/poly热区，coords坐标基于图片左上角像素值，且usemap的#前缀和name值必须严格一致。怎么用

和

给图片加可点击区域直接上手：HTML 图片热区靠

实现，不是 CSS 或 JS 模拟，是原生语义化方案。关键在两步：给

绑定

usemap

，再写对应

定义区域。常见错误是

usemap

值漏掉开头的

#

，比如写成

usemap="mymap"

而不是

usemap="#mymap"

—— 这会导致整个热区失效，浏览器根本找不到 map。

必须有

name

属性，且值要和

usemap

后面的

#xxx

严格一致（大小写敏感）

的

href

支持绝对 URL、相对路径、

mailto:

、

tel:

等，但不支持

javascript:

（现代浏览器会拦截）图片必须有明确宽高（最好用

width

height

属性或 CSS 固定），否则

coords

坐标可能错位

coords

怎么填：rect / circle / poly 的坐标规则

的

shape

决定

coords

格式，不是像素随便写，顺序和单位都固定：

shape="rect"

：左上 x,y + 右下 x,y，如

coords="10,20,100,80"

shape="circle"

：圆心 x,y + 半径，如

coords="150,60,30"

shape="poly"

：按顺时针/逆时针列顶点 x,y 对，如

coords="200,10,250,30,230,90,180,70"

注意：所有坐标都是相对于图片左上角（0,0）的整数像素值，不是百分比。如果图片被 CSS 缩放，

coords

不会自动适配 —— 这是最常被忽略的兼容性坑。立即学习 “ 前端免费学习笔记（深入） ”；使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载响应式场景下热区失效怎么办原生

不响应缩放，只要图片用

max-width: 100%

或

vw

单位等比例缩放，热区就必然偏移。没有纯 HTML/CSS 解法，必须加 JS 补偿：监听

window.resize

，按当前图片实际渲染宽高与原始宽高的比例，动态重算所有

coords

更稳妥的做法是改用 SVG 替代：

内嵌

等，天然支持响应式和矢量缩放若必须用

，至少把图片原始尺寸写死在 HTML 中（如