查看“︁Example:图片交互链接”︁的源代码

[[Template:图片交换链接/styles.css]]<br>
[[Template:图片交换链接]]<br>
一个悬停时表图淡出、里图淡入的图片交换组件，支持尺寸、过渡时长、底色、文字颜色与字体自定义。

==== 最简调用 ====

只传图片与文字，其余使用默认值：

<pre>
{{图片交换链接
| 表   = 占位图1.png
| 里   = 占位图1.png
| 文本 = 这是一段文字
}}
</pre>

效果：

{{图片交换链接
| 表   = 占位图1.png
| 里   = 占位图1.png
| 文本 = 这是一段文字
}}

==== 完整调用示例 ====

<pre>
{{图片交换链接
| 尺寸     = 10
| 过渡时长 = 0.5
| 表底色   = #99000e
| 里底色   = #1a0006
| 文字颜色 = #ffffff
| 字体     = yahei
| 表       = 占位图1.png
| 里       = 占位图1.png
| 文本     = 这是一段文字
}}
</pre>

效果：

{{图片交换链接
| 尺寸     = 10
| 过渡时长 = 0.5
| 表底色   = #99000e
| 里底色   = #1a0006
| 文字颜色 = #ffffff
| 字体     = yahei
| 表       = 占位图1.png
| 里       = 占位图1.png
| 文本     = 这是一段文字
}}

==== 参数说明 ====

{| class="wikitable"
! 参数 !! 可选值 !! 默认 !! 说明
|-
| 尺寸 || 任意数字 || 10 || 卡片边长，单位 em，只写数字，始终为正方形
|-
| 过渡时长 || 任意数字 || 0.5 || 悬停过渡时长，单位秒，只写数字
|-
| 表底色 || 任意颜色值 || #99000e || 表图片下方的背景色，用于填充透明 PNG 的透明区域
|-
| 里底色 || 任意颜色值 || 无 || 里图片下方的背景色，不传则透明
|-
| 文字颜色 || 任意颜色值 || 无 || 文本颜色，不传则继承页面文字色
|-
| 字体 || 字体类后缀，如 yahei、rubik、milton、narrow、seldom、script、rogue、anurati、mono || 无 || 文本字体，不传则走全站默认字体
|-
| 表 || 文件名，含扩展名 || 占位图1.png || 默认状态显示的图片
|-
| 里 || 文件名，含扩展名 || 占位图1.png || 悬停后显示的图片
|-
| 文本 || 任意文字，可含链接 || 这是一段文字 || 内容层文本，支持链接
|}

==== 注意事项 ====

* 桌面端鼠标悬停时，表图片与表底色作为整体淡出，内容层淡入；移动端因无悬停能力，直接显示内容层。
* 卡片始终为正方形，宽高由「尺寸」参数统一控制。
* 表底色与里底色用于填充透明 PNG 的透明区域；不传时该区域透明，露出下层或页面底色。
* 文本使用 <code>z-index:1</code> 覆盖在里图片之上，避免被图片遮挡。
* 字体类来自 [[MediaWiki:Citizen.css]]，详见 [[Example:字体调用]]。