HTML中map热点区域 HTML中map标签coords坐标计算方法-html教程-PHP中文网

coords 必须按图片原始尺寸手动填写像素值，shape 类型决定格式：rect需4个整数（x1,y1,x2,y2），circle需3个（cx,cy,r），poly需偶数个顶点坐标；所有值以naturalwidth/naturalheight为基准，不随css缩放变化。

html中map热点区域 html中map标签coords坐标计算方法

coords 不是算出来的，是你按图片原始尺寸（intrinsic size）手动填进去的像素值；填错、顺序错、类型不匹配，热区就点不中，浏览器也不会报错。

浏览器只认三类 shape 对应的坐标结构，填错一个数，整个 area 就失效：

shape="rect"：必须且仅能填 4 个整数，coords="x1,y1,x2,y2"，左上角和右下角——注意不是宽高，也不是中心点
shape="circle"：必须且仅能填 3 个整数，coords="cx,cy,r"，圆心 + 半径；半径不能为 0，也不能超图边界（否则可能被截断）
shape="poly"：必须填偶数个整数，coords="x1,y1,x2,y2,x3,y3,..."，每两个一组是顶点；首尾不自动闭合，少一对或多一对，形状就歪或漏边

所有值都以图片左上角为 (0,0)，单位是像素，跟 CSS 缩放、width/height 属性无关——哪怕你用 style="width: 50%" 把图压成一半，coords 还得按原图尺寸写。

常见原因不是量错了，而是没对齐「原始尺寸基准」：

设计稿是 @2x 导出的 PNG，你直接抄标注里的像素值，忘了除以 2 → coords 被放大一倍
图片 HTML 里没写 width/height，但 CSS 强制设了 max-width: 100%，此时浏览器仍以图片文件真实分辨率（naturalWidth）为 coords 基准
用截图插件在缩放后的页面上取点，但插件返回的是视口坐标，不是相对于原图的像素坐标

最稳的办法：打开 DevTools → Elements → 找到 img 标签 → 看右侧面板的 naturalWidth / naturalHeight，再拿这个尺寸当标尺，在 PS 或在线测距工具里量坐标。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

coords 是硬编码像素值，它不会随屏幕变小而缩放——这不是 bug，是规范如此。所以当图片被 CSS 缩放后，热区位置就漂移了：

JS 动态重算 coords 可行，但极易出错：图片加载完成时机、naturalWidth 是否已就绪、offsetWidth 是否含 padding/border，都会导致缩放比偏差
用 window.onresize 配合 setTimeout 强刷页面（比如 reload）属于反模式，破坏用户体验且不可靠
真正可维护的方案是放弃 <map></map>，改用 <svg></svg>：<rect x="10%" y="20%" width="20%" height="15%"></rect> 原生支持百分比，配合 viewBox 和媒体查询就能自适应

如果必须用 <map></map>，那就把图片导出为固定尺寸（比如统一 1200×800），所有 coords 全部按这个尺寸写死，并禁止 CSS 缩放——这是线上项目最省心的底线方案。

别靠猜，用这几个低成本方法快速验证：

给 area 加临时样式：style="outline: 2px solid red"，虽然 outline 不显示，但配合 console.log(event.clientX, event.clientY) 能比对鼠标落点是否在预期范围内
临时把 href 换成 javascript:alert('hit')，点一下就知道有没有触发
多边形区域出问题？复制 coords 字符串进 Excel，分列成两列 X/Y，画散点图看顶点顺序是否连贯

真正难的从来不是写对某一行 coords，而是整套流程里图像导出尺寸、HTML 中写的 width/height、CSS 控制逻辑、设计标注单位这四者之间一旦有一处脱节，所有热区都要重调。