跳到主要内容

图像热点 (Image Hotspots)

图像热点（Image Hotspots）是一种在单张图片上添加可点击标记的交互组件。通过热点弹窗展示文字、图片或视频等补充信息，适用于地图标注、产品部件说明、流程分步讲解、实验装置示意等场景，帮助学习者在原图上逐点探索并理解重点。

本教程目标​

  1. 了解图像热点的适用场景与优势
  2. 学习创建图像热点的完整操作流程
  3. 掌握热点弹窗的内容配置与样式设置

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像热点 (Image Hotspots)』开始创作。

注册/登录

何时使用图像热点​

图像热点适合用于信息图、产品讲解、平面图标注、设备部件说明等场景。通过在一张图片上添加多个可点击的热点，学习者可按需查看某个区域的详细信息，从而提升理解与参与度。

教程示例​

我们将创建一份“浆果介绍”图像热点。选择一张包含不同浆果的背景图，并添加多个热点为每种浆果提供说明文字或媒体。

浆果介绍：在一张图片上添加多个热点，为每种浆果提供说明文字或媒体
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击“复制” (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击“编辑”
  • 即可查看并操作本教程所示的设置。

创建图像热点：分步指南​

步骤 1：创建新内容​

  1. 在课灵工作区点击「创建」，进入 H5P 编辑器
  2. 在内容类型列表中选择 『图像热点』 或搜索 hotspot
  3. 打开进入编辑器，开始配置背景图与热点样式
选择图像热点内容类型
从 H5P 内容类型列表中选择『图像热点』

步骤 2：上传并设置背景图​

在顶部区域上传背景图片，并注意：

  • 图片会按容器宽度等比缩放，建议选用较高分辨率图片
  • 支持全屏查看，确保大屏下仍清晰可读
  • 补充版权或授权信息（如图片来源、许可）
  • 为背景图添加替代文本
上传并设置背景图
上传背景图片并设置相关选项

步骤 3：设置热点图标与颜色​

  • 热点图标：从预设图标中选择，或上传自定义图标
  • 预设图标：提供了多种常用图标，如加号、减号、对号、问号、感叹号等
  • 热点颜色：设置热点的颜色（十六进制颜色值，如 #000000）或使用取色器点击图片上的位置选择颜色
设置热点图标与颜色
设置热点图标与颜色

步骤 4：添加热点并定位​

  1. 点击图片任意位置以添加热点，会出现一个绿色圆圈标示热点位置
  2. 再次点击其他区域可重新定位热点
  3. 为热点填写 『标题』，用于弹窗顶部显示
添加热点并定位
添加热点并定位

步骤 5：配置弹窗内容​

每个热点的弹窗支持以下内容类型：

  • 文本（Text）：输入说明文字，超出区域会出现滚动条
  • 视频（Video）：插入视频资源进行解释说明
  • 音频（Audio）：插入音频资源进行说明
  • 图片（Image）：插入图片强化视觉示例

每个热点弹窗可以包含多个内容类型，根据需要进行组合。

示例​

第一个热点标题为草莓。

文本为：

草莓是唯一种子长在外面的水果，据说具有增强免疫力的功效。

视频为：

草莓的一生

添加热点内容项
添加热点内容项

重复上述步骤，点击 『添加热点』 为其他浆果添加热点。

添加其它热点
添加其它热点

步骤 6：保存与预览​

点击 『保存并关闭』 生成完整的示例内容。您现在应该有一个与本教程顶部示例类似的结果。

专家提示：用例灵感与相关内容类型推荐​

想把『图像热点（Image Hotspots）』用得更好？以下灵感与实践建议可供参考：

  • 学术与科普：器官结构标注、地质/地理信息图、设备示意图中的关键部位说明
  • 教学与培训：试题图示分点讲解、实验装置安全提示、课堂拍照笔记的要点标注
  • 产品与工程：PCB/零部件位置说明、界面截图中的控件功能说明、流程图分步说明
  • 地图与导览：校园/展馆导览图的站点与路线、平面图中的功能区与应急设施标注
  • 博物与文献：文物细节释读（铭文、纹样）、插图注释与图例说明、高清图中的来源与版权说明

制作与可达性优化：

  • 图标与对比度：选择高对比度颜色与清晰形状的热点图标，避免遮挡关键文本或符号
  • 布局与密度：热点分布均衡，必要时分层或分页；同一区域热点过多时建议合并或分区
  • 标题与内容：热点标题简洁明确；弹窗内容聚焦重点，必要时使用列表、图片或短视频
  • 无障碍文本：为背景图与关键插图提供替代文字（Alt）；在热点内容中说明上下文与目的

选型与组合建议（与其他内容类型搭配）：

最后由 Sam Xu 于 更新