Hotspot：图片热点标注
Hotspot 在一张图片的特定位置放置可聚焦、可点击的标记，每个标记指向图中某个具体对象，如商品、部件或说明。它的关键是「位置有语义」：点在哪里，就说明图里那一处是什么。这一点区别于 Overlay：Overlay 只是文字与媒体的层叠关系，位置不指向图内对象。
适合与不适合
适合 Shop the look、场景图里的多件商品、产品结构图的部件说明。不适合只有一件商品的普通主图、标注位置本身没有意义的情形，以及图上需要标注很多点的复杂场景。这些应改用 Cards 或 List。
与相邻模式的区别
| 模式 | 判据 |
|---|---|
| Hotspot | 标记的位置对应图中对象；点击打开该对象的信息或链接 |
| Media Gallery | 同一对象的多个视角，通过缩略图或序列切换；不在单张图上定位 |
| Overlay | 文字或控件叠在图上，位置不指向图内的具体对象 |
| Popover | 热点点击后的常见展示方式，是信息层，不是标注本身 |
优点与缺点
| 优点 | 缺点 |
|---|---|
| 把场景与商品直接关联，不用来回对照 | 位置随裁切与缩放漂移，维护成本高 |
| 一张图承载多个入口 | 小屏上标记难点、易重叠 |
| 保留场景语境 | 没有文字等价时，键盘与读屏用户无法使用 |
内容与交互要求
每个热点是一条记录：位置（相对图片的坐标）、对象名称、目标（商品页、变体或说明）、当前可售状态。
- 文字等价：图旁必须有一份列表，列出全部热点的名称、价格、状态与链接。这份列表是无障碍等价、小屏退化与无 JavaScript 的共同基础；热点与列表项可以互相高亮，但列表须独立可用。
- 名称：热点是控件，WCAG 1.1.1 Non-text Content 要求控件有描述其用途的名称；名称用对象名称，如「亚麻衬衫」，不是「热点 3」。场景图本身的 alt 描述场景。
- 展开内容：悬停或聚焦显示的内容须满足 WCAG 1.4.13：可关闭、可悬停、持久；细节见 Popover。信息多时改用抽屉或跳转，不在热点里做购买决策。
- 数量：每张图的热点数量要设上限，避免标记彼此遮挡。
响应式与无障碍
键盘与焦点：WCAG 2.1.1 Keyboard 要求所有功能都能用键盘操作，因此热点用 <button> 或 <a>，Tab 顺序与视觉阅读顺序、旁边的列表顺序一致。WCAG 2.4.11 Focus Not Obscured (Minimum)（AA）要求获得焦点的组件不被作者创建的内容完全遮住，弹出层不能压住当前热点。
触摸目标：WCAG 2.5.8 Target Size (Minimum)（AA）要求指针目标至少 24×24 CSS 像素，例外包括：小目标周围以其包围盒中心画出的 24 像素直径圆不与其他目标相交；同一页面另有达标的等价控件；行内目标；用户代理控制的尺寸；以及尺寸与间距对信息本身必不可少（页面举例为地图标记）。做法是视觉标记可以小，但可点击区域扩到不低于 24 像素；AAA 的 2.5.5 Target Size (Enhanced) 要求 44×44 CSS 像素，建议触屏优先场景靠近该值。同页的文字列表可能构成「等价」例外，但不要靠它规避小目标；商品热点是否算「必不可少」的例外，本库不默认成立。
位置漂移：坐标应当保存为相对图片自身宽高的百分比，并保持容器与图片同一宽高比。MDN 说明 object-fit: cover 在宽高比不一致时会裁切图片，此时容器百分比与图片内容脱节，热点会偏移，甚至落到被裁掉的区域。可行做法：小屏不裁切；不同裁切各存一套坐标；或者在裁切后重新换算，被裁出可见范围的热点在列表中保留、在图上不显示。替换图片或更换裁切后必须重新校准坐标。MDN 的 map 页只给出 area 的坐标示例，未说明其在响应式下的表现，本文未核验，不推荐用 image map 做响应式热点。
缩放与放大：320 CSS 像素宽度与大字号下，标记与弹出层不得越出视口。
状态与退化
- 零个热点：显示普通图片与说明，不显示空标记层。
- 一个热点：不需要图层，直接在图旁写商品与链接。
- 多个：限制上限，列表始终完整。
- 图片加载中或失败：先显示列表；不显示悬空的标记。
- 商品状态：见下节。
- 无 JavaScript：图片下方的列表可用；热点可以退化为指向列表锚点的链接。
- 减少动态：不做脉冲或弹跳的吸引动画。
每个热点的商品可售状态
热点指向商品时，价格与可售状态由运行时数据决定，不写死。Shopify 的 product.available 表示商品至少有一个变体可售，variant.available 表示某个变体是否可售（shopify.dev，核验于 2026-09-29）。指向特定变体的热点读取该变体状态，见商品选型模块。商品售罄、已下架或不在当前市场销售时：图上标记保留但显示状态，或撤下标记，并在列表中说明；不要把顾客带到无法购买的页面。image.aspect_ratio 在 Liquid 中返回图片宽高比小数值，可用于容器比例；focal_point 在对象页未读到，未核验。
常承载的内容与模块
内容多为商品展示与使用场景（其页面列出 Hotspot Image 作为可采用的展现）。用用户生成内容做场景图时，授权范围是否覆盖二次编辑与在图上标注商品，需另行确认。相邻模块：商品选型模块、变体媒体模块。本库现有主题解读中未涉及热点组件，Shopify 主题内置能力未核验。
发布前检查
- 位置是否真的对应图内对象？
- 是否有独立、完整的文字列表？
- 键盘可达、有可见焦点，弹出层不遮住触发点？
- 可点击区域是否不低于 24×24 CSS 像素？
- 各断点与裁切下，热点是否仍落在对象上？
- 每个热点的可售状态是否来自运行时数据？
固定版本主题实现
- Horizon 媒体放大与热点：Horizon 4.2.0 有
sections/product-hotspots.liquid，解读中列出了与本文契约的差距。Dawn 解读未涉及热点标注。
固定基线为 Dawn v15.3.0 与 Horizon 4.2.0；结论限于这两个提交，均为静态源码分析，未运行验证。
待继续完善
- 未在真实设备验证触摸命中与读屏行为。
- 未核对
area坐标响应式行为、Liquidfocal_point与主题内置热点。 - 缺少经过授权的场景图样例；样例须标为虚构示例。