HTML电商图片区域映射怎么用？活动页面制作指南-html教程-PHP中文网

使用实现图片热区需确保：图片原始尺寸固定；usemap="#xxx"与严格匹配（name无#、仅小写字母数字短横线）；coords基于原始大图精准计算；响应式下需动态缩放coords或改用svg。

html电商图片区域映射怎么用？活动页面制作指南

直接用 <map></map> + <area> 就能实现，但必须确保图片原始尺寸固定、usemap 与 name 严格匹配、coords 基于原始大图精准计算——否则热区点不中、跳转失效、移动端全错位。

这是电商页面热区失效的头号原因：浏览器对大小写、空格、#前缀极其敏感，错一个字符就完全不工作。

<img usemap="#promo-banner"> 中的 #promo-banner 必须一字不差地对应 <map name="promo-banner"></map> 的 name 值（注意：name 里没有 #）
name 值不能含空格、中文、特殊符号，只用小写字母、数字、短横线，比如 promo-banner-2026 安全，promo banner 或 promo_2026 都可能出问题
同一页面多个热区图（比如 banner + product-grid），每个 usemap 和 name 都必须唯一，不能复用同一组名称
控制台若报 Failed to load resource，大概率是 <area href="#item1"> 这类无效锚点，应改为 href="./product.html?id=1" 或用 JS 拦截并阻止默认跳转

电商活动页常见「一张大图含多个商品入口」，本质仍是单图映射，关键不是拆图，而是把每个子图在原始大图中的像素位置量准。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

用 Figma / Photoshop 打开导出后的完整大图，以整张图左上角为 (0, 0)，量出每个商品区域的左上角 (x1, y1) 和右下角 (x2, y2)
每个 <area> 写 shape="rect"，coords 填 "x1,y1,x2,y2"，例如第一款手机区域是 coords="42,87,215,230"
不要用 CSS 定位多个小图模拟——那样无法语义化，alt 失效，无障碍访问失败，部分电商平台审核会直接拒掉
若大图由 Canvas 动态生成，必须在导出时记录各区块坐标，再注入 HTML；运行时用 JS 测量 DOM 尺寸不可靠，尤其加载未完成时

<area coords> 是绝对像素值，一旦图片被 CSS 缩放（比如 width: 100%）、视口变化或高清屏渲染，热区立刻偏移。这不是 bug，是原生机制限制。

最简方案：给 <img> 设置固定 width 和 height 属性（如 width="1200" style="max-width:90%"），禁用 CSS 缩放，适配移动端靠媒体查询切换不同尺寸图
动态方案：监听 window.resize 和 img.onload，用 img.naturalWidth / img.naturalHeight 与 img.clientWidth / img.clientHeight 算出缩放比，重写每个 <area> 的 coords 字符串（注意：coords 属性可直接赋值字符串，但需按 shape 分支处理 rect/circle/poly）
更推荐方案：直接换 SVG。矢量图形天然响应式，坐标基于 viewBox，支持 CSS 动画、JS 事件委托、无障碍 <title></title>，复杂热区维护成本远低于反复调 coords