图像混合 (Agamotto)
图像混合（Agamotto）通过可拖动滑块按顺序呈现一组图片，让学习者直观观察同一对象在不同阶段或细节被逐步揭示的变化。
本教程目标
- 理解 图像混合 (Agamotto) 的适用场景：按顺序探索一组图像
- 学习创建内容、添加图像及说明文本
- 了解滑块刻度与“自动贴合”行为等设置
- 正确填写图片的版权与来源元数据
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像混合 (Agamotto)』开始创作。
何时使用图像混合
图像混合适用于需要“按顺序观察同一对象在不同阶段或层次变化”的场景。常见用法包括：
- 时间序列讲解：施工/修复/清洁过程、植物生长、季节变迁、产品制造工序
- 分步揭示与层层叠加：逐步显露细节、图层/标注逐步增加（地图要素、科研影像对比）
- 过程演示：绘画建模、图像处理、样品制备与实验操作的阶段性呈现
- 版本迭代展示：UI/产品设计从旧版到新版的变化路径，强调同一位置的差异
- 教学观察与讨论：依序查看变化，促发“描述—猜想—验证—总结”的课堂互动
教程示例
我们将创建一个以“四季”为主题的 Agamotto 内容，包含 4 张代表不同季节的图片，并在每张图片下方添加简短说明。
包含4张图片的图像混合示例
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击“复制” (注意：请确保已登录课灵账号，否则无法复制)
- 随后在生成的副本中点击“编辑”
- 即可查看并操作本教程所示的设置。
创建图像混合：分步指南
步骤 1：创建新内容
- 在课灵工作区点击「创建」，进入 H5P 编辑器
- 在内容类型列表中选择 『图像混合（Agamotto）』 或搜索
agamotto - 进入编辑界面开始配置
从 H5P 内容类型列表中选择『图像混合』
步骤 2：填写简介
- 在 『标题』 字段输入：
Four Seasons
步骤 3：添加项目
在 『项目』 区域依次添加四个季节的图片：
- 点击 『添加项目』，上传第一张图片（示例中春天的图片）
- 填写 『替代文字』和『标签』：
Beautiful Purple flowers - 填写 『描述』：此处填入关于春天歌词
- 点击 『添加项目』 重复以上步骤，依次添加“夏”“秋”“冬”的图片，替代文字和标签，以及关于每个季节的歌词说明
添加项目，填写图片替代文字、标签、描述
提示
为每张图片选择清晰且版权合法的素材，并在需要时填写元数据（见步骤 4）。
步骤 4：填写图片版权与元数据
（可选但推荐）
为每张图片填写元数据以便后续引用与合规：
- 标题：例如
summer - 许可：如
CC0 - 来源：图片链接（如公共领域素材库）
- 作者：作者署名
填写图片元数据，包括标题、许可、来源、作者
步骤 5：行为设置
根据需求调整以下行为：
- 显示刻度：在滑块上为每张图片显示刻度点，便于定位
- 位置自动对齐：拖动滑块时自动贴合到某一张图片的位置
- 显示标签：在每张图片的刻度上方显示标签，方便学习者理解图片内容，尤其是在没有为图片提供描述时
步骤 6：保存与预览
点击 『保存并关闭』 生成内容。预览时拖动滑块，即可按顺序查看四季图片与下方的歌词。您现在应该有一个与本教程顶部示例类似的结果。 若有素材或描述不清晰，请返回编辑器进行替换与完善。
专家提示：用例灵感与相关内容类型推荐
想拓展『图像混合（Agamotto）』的使用场景？以下灵感与实践建议可供参考：
- 时间序列讲解：施工/修复/清洁过程、植物生长、季节变迁、制造工序的阶段性观察
- 分步揭示与层层叠加：逐步显露细节、图层/标注逐步增加（科研影像、地图要素）
- 过程演示：绘画建模、图像处理、样品制备与实验操作的关键步骤
- 版本迭代展示：UI/产品设计从旧版到新版的变化路径，强调同一位置的差异
- 教学观察与讨论：依序查看变化，促进“描述—猜想—验证—总结”的课堂互动
如何根据目标选择更合适的内容类型
- 两图强对比：使用『图像并置（Image Juxtaposition）』在同一画面直接对比两张图片。
- 多图线性浏览：选择『图像滑块（Image Slider）』以节省页面空间、不强调同位对齐。
- 并列同时展示：采用『图片拼贴（Collage）』形成作品墙或海报式集合。
- 时间事件叙事：参考『时间轴（Timeline）』组织事件与文本/媒体说明。
- 局部信息标注：若需在单图上添加多个点击说明点，使用『图像热点（Image Hotspots）』。