图像并置 (Image Juxtaposition)
图像并置（Image Juxtaposition）用于在同一画面直观对比两张图片的差异，学习者可通过拖动中间滑杆在“前后/旧新/处理前后”等状态之间切换，聚焦观察同一位置的变化。
本教程目标
- 掌握图像并置的适用场景与交互特点
- 学习创建「图像并置」的完整操作流程
- 了解如何配置左右图像、标签与滑块参数
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像并置 (Image Juxtaposition)』开始创作。
何时使用图像并置
- 展示「前后对比」场景，如修复前后、改造前后、清理前后
- 呈现不同时间点的变化，如卫星图、环境监测、历史影像对比
- 对比不同状态或版本，如产品迭代、方案 A/B、医学影像诊断
- 强调同一位置的差异，帮助学习者聚焦于关键区域的变化
教程示例
下面是我们将在本教程中创建的课件，主题是「洪水前后对比」。
洪水前后对比示例: 请拖动滑块进行对比
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击“复制” (注意：请确保已登录课灵账号，否则无法复制)
- 随后在生成的副本中点击“编辑”
- 即可查看并操作本教程所示的设置。
创建图像并置：分步指南
步骤 1：创建新内容
- 在课灵工作区点击「创建」，进入 H5P 编辑器
- 在内容类型列表中选择 『图像并置』 或搜索
Image Juxtaposition - 进入编辑界面开始配置
从 H5P 内容类型列表中选择『图像并置』
步骤 2：填写基本信息
标题：为您的活动命名（例如：洪水前后对比）
步骤 3：设置图片
- 图片1：上传并填写替代文本和标签，如：2011 年7月11日（便于无障碍与搜索）
- 图片2：上传并填写替代文本和标签，如：2011 年10月23日（便于无障碍与搜索）
- 尺寸建议：两张图像尽量使用相同尺寸和分辨率，保证同一位置的对比一致
- 文件格式：优先使用
jpg/jpeg或经过压缩的png；建议单张不超过1MB
图像并置编辑器界面，显示图片对比选项
步骤 4：设置滑块参数
- 初始位置：设定滑块在 0%–100% 区间的默认位置（例如 50%）
- 滑块方向：默认水平方向，可根据需要调整为垂直方向
步骤 6：保存与预览
点击 「保存并关闭」 按钮，生成完整的图像并置内容。您现在应该有一个与本教程顶部示例类似的结果。
专家提示：用例灵感与相关内容类型推荐
想拓展『图像并置』的使用场景？以下灵感与实践建议可供参考：
- 文物/艺术修复前后：清理、补全、复原效果的对比与讲解
- 城市建设与环境治理：道路修复、绿化改造、治理前后污染对比
- 医学/科研影像：CT/MRI/超声等不同时间点或不同方式的同部位对照
- 产品与界面迭代：版本 A/B、设计改版前后、UI 组件对齐与间距优化对比
- 地图与遥感时序：洪水淹没范围、林地变化、冰川退缩、土地利用
- 设施改造与安全治理：校园或厂区设施整改前后、标识优化效果
如何根据目标选择更合适的内容类型
- 若需“对比不止两张图片”或“按时间序列讲述变化”，考虑『图像滑块（Image Slider）』或『时间轴（Timeline）』。
- 若希望“同屏并列展示多张图片”形成作品墙或海报式集合，选择『图片拼贴（Collage）』。
- 若需要“在单张图片上标注多个可点击的信息点”，使用『图像热点（Image Hotspots）』进行局部说明与交互标注。
- 当需要“讲解 + 多组件整合 + 评测”，可在『课程演示（Course Presentation）』或『互动书（Interactive Book）』中嵌入对比素材与测验，形成完整学习路径。