HTML area标签创建图片超链接区域的方法-html教程-PHP中文网

area标签必须嵌套在内且与严格配对；shape和coords须成对出现、格式正确；href不支持纯锚点；coords不随缩放自适应，移动端需确保热区≥44×44px。

html area标签创建图片超链接区域的方法

area 标签必须嵌套在里，且不能单独存在

area 标签本身不渲染任何内容，也不接受子元素。它只在内部才生效，且必须与显式配对。常见错误是把 area 放到

 或  里，或者漏写  —— 这时浏览器完全忽略所有 area，点击无反应。确保三者严格一致：


 中的 #main-map 必须和  的 name 完全匹配（大小写敏感）

 不能被 、 或 Shadow DOM 隔离，否则关联断裂
多个 area 可共存于一个 ，但每个 area 必须有 shape 和 coords


shape 和 coords 必须成对出现，且格式不能出错
shape 只接受四个值：rect、circle、poly、default；写成 rectangle 或 round 会静默失效。对应 coords 的格式也严格固定：


shape="rect" → coords="x1,y1,x2,y2"（左上 + 右下，不是宽高）

shape="circle" → coords="cx,cy,r"（圆心 x、y 和半径，不是直径）

shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."（顶点坐标成对，总数必须为偶数；顺序影响填充，自相交多边形渲染不可靠）

shape="default" → 不需要 coords，覆盖图中未被其他区域覆盖的部分

coords 中不能有空格、换行或中文逗号；用图像编辑工具导出坐标后，务必手动清理空格和多余字符。

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										
href 必须是有效 URL，纯 #id 锚点基本不可用
很多人想让某个热区跳转到页面内 
，于是写 href="#section2" —— 这在绝大多数浏览器中不会触发滚动，属于无效写法。HTML 规范不保证 area 的 href 支持 fragment-only 地址。

可行写法：href="./page.html#section2"（带路径）、href="javascript:void(0)"（配合 JS 处理）
无效写法：href="#"、href="#section2"、href=""（会触发当前页重载或报 Failed to load resource）
若需锚点行为，推荐用 JS 绑定 click 事件并调用 element.scrollIntoView()


移动端和缩放图片下 coords 不自动适配，必须手动处理
coords 值始终基于原始图片像素尺寸，不随 CSS 缩放、width/height 属性或响应式布局变化。图片在手机上被缩放到 50%，但 coords 还是按原图 1000×600 解析，热区就偏了。

最稳妥方案：改用 SVG 替代 map/area，SVG 坐标天然响应式
折中方案：用 JS 监听 resize，按缩放比例动态重写 area.coords（需先获取原始尺寸与当前渲染尺寸比值）
底线要求：移动端热区最小物理尺寸 ≥ 44×44px，否则 iOS Safari 可能拒绝响应点击

真正容易被忽略的是：当图片通过 object-fit: cover 裁剪显示时，coords 仍以原始宽高为基准，但可视区域已变形——此时坐标系统与用户所见完全脱节，必须放弃 area 改用定位 + 事件委托。