图像透视 (X-Ray)
图像透视（X-Ray）是一种交互式对比组件，允许将一张“正常图像”叠加在“X-Ray图像”之上，通过拖动或使用键盘在同一画面中揭示差异。适合用于科学案例（可见光/红外对比）、历史文物修复、医学影像说明等场景，帮助学习者聚焦局部细节并理解前后层的变化。
本教程目标
- 了解 X-Ray 的核心概念与适用场景
- 学会创建并配置前景/背景图像与镜头参数
- 掌握键盘触发、背景调暗、图像宽度等常用设置
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图像透视（X-Ray）』开始创作。
何时使用图像透视
- 需要在同一位置对比两张图的差异，如可见光 vs. 红外
- 需要突出显示局部区域差异，用“透视镜头”查看细节
- 强调同一画面前后层的变化，不改变现有版式结构
教程示例
下面的示例展示了可见光与近红外影像的局部对比，右下角的小圆点按钮可切换 X-Ray 开关。
X-Ray 示例：星系可见光与近红外的局部对比
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击“复制” (注意：请确保已登录课灵账号，否则无法复制)
- 随后在生成的副本中点击“编辑”
- 即可查看并操作本教程所示的设置。
创建图像透视：分步指南
步骤 1：创建新内容
- 从 H5P 编辑器的内容类型列表中选择 『图像透视 (X-Ray)』 或搜索 x-ray
- 打开编辑器进入配置界面
从 H5P 内容类型列表中选择『图像透视 (X-Ray)』
步骤 2：设置标题并上传两张图像
在 『标题』 字段中输入：如 图像透视 (X-Ray) 示例
设置标题并上传背景（X-Ray）图像，填写替代文本
上传前景（正常）图像并填写替代文本，确保两张图同一视角
- 背景图像（X-Ray 图）：上传并勾选/不勾选「仅作为装饰」；填写必填的 替代文字（例如：
image of a galaxy at near infrared light） - 前景图像（正常图）：上传并填写 替代文字（例如：
image of a galaxy at visible light） - 悬停文字与图片名称：按需设置，提升可读性与说明性
步骤 3：配置图像与镜片
- 图像宽度与位置：在无法控制容器宽度时，可手动设定图像宽度与对齐位置
- 镜头大小：调整透视镜（“放大镜”）的直径，建议根据图像细节适配
- 背景调暗：可选择不调暗，以便更清晰比较背景细节
设置镜头大小、背景是否调暗、是否自动透视、是否显示右下角指示按钮
步骤 4：配置行为
- 触发模式：可关闭自动透视，改为用户手动开启（键盘或按钮）
- 指示按钮：可隐藏右下角的小圆点，但建议保留，便于键盘操作切换
设置是否自动透视、是否显示右下角指示按钮
步骤 5：保存与预览
点击 『保存并关闭』 生成示例内容。您现在应该有一个与本教程顶部示例类似的结果。
优化与无障碍建议
- 对齐与视角一致：前景与背景应使用同一拍摄视角或裁切范围
- 文件体积优化：压缩图像，避免加载延迟，提升移动端体验
- 清晰替代文本：为两张图提供准确的替代描述，支持读屏与 SEO
- 键盘可控：保留指示按钮以便键盘切换；确保焦点样式可见
- 颜色与对比度：调暗背景需兼顾可读性与差异突出
专家提示：用例灵感与相关内容类型推荐
想把『图像透视（X-Ray）』用得更好？以下灵感与实践建议可供参考：
- 科学与科普：可见光/近红外对比、X 射线与可见光叠加、遥感图层（土地覆盖 vs. 热力/湿度）
- 医学与健康：CT vs. MRI 局部差异、病灶位置示意与解释（注意隐私与合规）
- 文物与修复：修复前后对比、底稿与成稿的局部透视、油画罩染层的差异揭示
- 工程与产品：PCB 热成像与电路图对比、材料缺陷/纹理透视、工业检测前后层差异
- 课堂与培训：题图提示的遮挡与揭示、实验装置隐含结构说明、答案讲解前后层展示
制作与可达性优化：
- 镜头直径与对比目标匹配：细节密集用较小镜头，粗粒度区域用较大镜头
- 背景调暗与对比度：根据信息密度调整，避免遮挡关键文本/符号；保证色彩与对比度可读
- 无障碍文本：为两张图分别提供明确的替代文字（Alt），在悬停文字中说明比较维度（例如“可见光 vs 近红外”）
- 键盘可控与指示按钮：建议保留右下角按钮；Tab 聚焦后用空格/回车切换透视；确保焦点样式明显
- 视角一致与齐次裁切：两图应使用相同拍摄角度/裁切范围，避免“错位透视”
选型与组合建议（与其他内容类型搭配）：
- 两图直接对比（前后/旧新/修复前后）：使用『图像并置（Image Juxtaposition）』
- 渐变/演进过程（同一位置随时间或层级变化）：选择『图像混合（Agamotto）』
- 单图多点说明与交互标注：使用『图像热点（Image Hotspots）』
- 多图并列展示或图片集合：参考『图片拼贴（Collage）』
- 并行主题分区与文本组织：考虑『标签页（Tabs）』或『手风琴（Accordion）』
- 讲解 + 测验整合，形成完整课程流：在『课程演示（Course Presentation）』或『互动书（Interactive Book）』中嵌入本组件
- 章节收尾与要点巩固：使用『摘要（Summary）』复盘“本图需要注意的关键细节”