置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:PicHover

来自萌娘百科
跳到导航 跳到搜索
Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]

本模板用于图片的hover切换效果,使用了widget:Hover

注意

使用本模板时请检查移动端有无显示问题。如果不知道如何解决移动端的显示问题,可以尝试替换为另一模板{{TextHover|4=pic}}

参数与实例

一共有七个参数,其中有两个是必须的。

参数列表
参数名 是否必须 参数样式 参数示例 参数作用
pic xxx.png【站内图片】 ZhMoegirl15.2.png 设置鼠标未放置于其上时显示的图片
http://xxx/xxx.png 或者 https://xxx/xxx.jpg… https://img.moegirl.org.cn/common/2/21/ZhMoegirl15.2.png
hover xxx.png【站内图片】 Zh2014 moegirlpedia logo.png 设置鼠标放置于其上时显示出的图片
http://xxx/xxx.png … https://img.moegirl.org.cn/common/f/fd/Zh2014_moegirlpedia_logo.png
width 否,默认为空 xxx【数字】 150 设置显示的图片宽度
height 设置显示的图片高度
float 否,默认为none left / right 让图片浮动起来~
text 否,默认为空 【任意文字】 MoegirlPedia 添加一个边框以及带有【text】内容的标题框
link 【任意页面名】 User:萌百娘 使得内链图片能够链接到萌百页面

于是完整的代码实例如下:

{{PicHover|pic=ZhMoegirl15.2.png|hover=Zh2014 moegirlpedia logo.png}} //最简
{{PicHover
|pic=https://img.moegirl.org.cn/common/2/21/ZhMoegirl15.2.png
|hover=https://img.moegirl.org.cn/common/f/fd/Zh2014_moegirlpedia_logo.png
|width=150
|height=180
|float=right
|text=MoegirlPedia
|link=萌百娘
}} //最多

显示效果:

ZhMoegirl15.2.png
Zh2014 moegirlpedia logo.png
MoegirlPedia