图片注释君-参考文档

著作信息

标题：图片注释君（Image Annotator）
作者：WitheriteWitherite
创作年份：2026
译者：NiaGbaNiaGba

描绘圣经中最后的晚餐的绘画，中央的耶稣基督与围绕其的十二使徒共同坐在餐桌前。

.

耶稣基督

.

巴多罗买

.

亚勒腓的儿子雅各

.

安得烈

.

犹大

.

彼得

.

约翰

.

多马

.

西庇太的儿子雅各

.

腓力

.

马太

.

达太

.

西门

最后的晚餐，列奥纳多・达・芬奇作。

这是什么？

这是一个用于实现当鼠标悬停于插图上时显示注释的组件，可以用于说明插图中的人物或物体、或是翻译插图中的外语。灵感来源于Wikimedia Commons的ImageNote样板（使用例）。

使用方法

准备工作

要使用本组件，请添加以下语法。

[[div class="image-block-with-annotation"]]
[[image {插图的URL}]]

{注释}

[[/div]]

此处 {插图的URL} 的部分输入想要添加的插图URL， {注释} 的部分include本组件（详见下节）。 {注释} 的部分可以添加任意数量的注释。

组件说明

本组件的语法、参数如下。

[[include :scp-wiki-cn:component:image-annotator
|X-start=
|X-end=
|Y-start=
|Y-end=
|text=]]

参数名数据类型说明
X-start数值（需添加%号）设置注释的左边界。插图左边界为0％，插图右边界为100%。
X-end数值（需添加%号）设置注释的右边界。插图左边界为0％，插图右边界为100%。
Y-start数值（需添加%号）设置注释的上边界。插图上边界为0％，插图下边界为100%。
Y-end数值（需添加%号）设置注释的下边界。插图上边界为0％，插图下边界为100%。
text字符串设置注释悬停提示的内容。

当X-start小于50%（即注释左边界在插图中心左侧）时，注释悬停提示框的左边界会与注释框的左边界对齐，当X-start大于50%（即注释左边界在插图中心左侧）时则其右边界会与注释框的右边界对齐。

插图方块的使用

若想在使用本组件的同时使用插图方块，则请使用下面的语法代替准备工作一节中的语法。{注释} 的部分include本组件。标准插图方块中的各项参数都可以使用，但需注意caption须被添加在最后。

[[include :scp-wiki-cn:component:image-annotator-block-start
|name=
|width=
|align=]]

{注释}

[[include :scp-wiki-cn:component:image-annotator-block-end
|caption=]]

CSS自定义样式

通过使用CSS可以自定义颜色等样式。

:root {
  --annotation-background:
  --annotation-background-opacity:
  --annotation-border:
  --annotation-hovered-background:
  --annotation-hovered-background-opacity:
  --annotation-hovered-border:
  --annotation-hovertip-color:
  --annotation-hovertip-background:
  --annotation-hovertip-border:
}

参数名默认值说明
--annotation-background255, 255, 255 █注释框背景色，使用RGB值设置。
--annotation-background-opacity0注释框背景色的不透明度，0为透明，1为完全不透明。
--annotation-border255, 255, 0 █注释框边框的颜色，使用RGB值设置。
--annotation-hovered-background255, 255, 0 █悬停时注释框的背景色，使用RGB值设置。
--annotation-hovered-background-opacity0.5悬停时注释框背景色的不透明度，0为透明，1为完全不透明。
--annotation-hovered-border255, 127, 0 █悬停时注释框边框的颜色，使用RGB值设置。
--annotation-hovertip-color51, 51, 51 █悬停提示框的文字颜色，使用RGB值设置。
--annotation-hovertip-background255, 255, 255 █悬停提示框的背景色，使用RGB值设置。
--annotation-hovertip-border96, 96, 96 █悬停提示框边框颜色，使用RGB值设置。

注意事项

  • 若注释中完全包含其他的注释，被包含的注释将无法悬停显示。请确保注释没有被包含在其他的注释里。
  • 由于include本身的特性，注释中无法使用内部链接（[[[link|链接]]]）一类含有管道符（|）的语法。
  • 若在使用了对链接进行装饰的版式的文章中使用，注释外观可能会崩，若产生此种情况，请避免使用本组件，或在有能力的情况下使用CSS调整注释外观。

无障碍

由于实装条件限制，本组件在无障碍树方面表现极差。因此，需要保证较高无障碍兼容性的场合请不要使用本组件。此外，重要的信息请勿仅放在注释中，此种情况在正文中记录相同内容为佳。（参考资料：WCAG 2.2 说明书 达标标准 1.3.1：信息及相关性 - WAIC）

使用tab键切换注释时将按照在源代码中添加的顺序切换。为避免使用键盘切换时产生混乱，请根据从左到右或是从上到下，或者根据注释对象的重要性等某种统一的顺序添加注释。（参考资料：WCAG 2.2 说明书 达标标准 1.3.2：有意义的序列 - WAIC、WCAG 2.2 说明书 达标标准 2.4.3：聚焦顺序 - WAIC）

根据本组件适用图片颜色的不同，存在注释难以发现甚至完全不可见的可能。为保证辨识度，建议确保图片与注释间的对比度较高。必要时请更改注释的颜色。（参考资料：WCAG 2.2 说明书 达标标准 1.4.11：非文本内容的对比度 -WAIC）

在移动端等画面尺寸较小的环境中，较小的注释的辨识度可能较低。通过放大图片或是扩大注释框的范围，能够提高此种情况下的辨识度。（参考资料：WCAG 2.2 说明书 达标标准 2.5.8：目标的大小（高度） -WAIC、WCAG 2.2 解説書 達成基準 2.5.8: 说明书 达标标准（最低限制） -WAIC）

使用例

莎士比亚戏剧《哈姆雷特》初版的封面。

.

丹麦王子哈姆雷特的悲剧故事

.

威廉・莎士比亚著

.

根据真实完整的抄本放大接近一倍重新印刷

.

于伦敦
印刷：I・R，
发售：N・L，弗利特街圣邓斯坦教堂下属店铺
1605年

+ 代码- 代码

[[div style="width: 350px; margin-left: auto; margin-right: auto;"]]

[[div class="image-block-with-annotation"]]
[[image https://scp-jp-storage.wdfiles.com/local--files/file%3A6370408-595-tjwc/Hamlet.jpg alt="莎士比亚戏剧《哈姆雷特》初版的封面。"]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=3.6%
|X-end=95.1%
|Y-start=1%
|Y-end=26.6%
|text=丹麦王子哈姆雷特的悲剧故事]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=20.1%
|X-end=73.1%
|Y-start=27.3%
|Y-end=33.5%
|text=威廉・莎士比亚著]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=2.2%
|X-end=95.3%
|Y-start=33.8%
|Y-end=47.3%
|text=根据真实完整的抄本放大接近一倍重新印刷]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=2.8%
|X-end=93.2%
|Y-start=84.2%
|Y-end=98.2%
|text=于伦敦
印刷：I・R，
发售：N・L，弗利特街圣邓斯坦教堂下属店铺
1605年]]

[[/div]]

[[/div]]

被侍女围绕的君面朝浮舟，身旁有一名侍女正在朗读绘卷故事。

.

浮舟

.

中君

.

中君的侍女（右近）

.

中君的侍女

.

中君的侍女

《源氏物语绘卷》东屋一。中君为让悲痛中的浮舟听绘卷故事解闷，让侍女右近为她朗读。

+ 代码- 代码

[[include :scp-wiki-cn:component:image-annotator-block-start
@@|name=https://scp-jp-storage.wdfiles.com/local--files/file%3A6370408-596-0nv4/Genji_emaki_azumaya.jpg@@
|alt=alt
|alt-text=被侍女围绕的君面朝浮舟，身旁有一名侍女正在朗读绘卷故事。]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=27.7%
|X-end=43.5%
|Y-start=14.2%
|Y-end=43.6%
|text=**浮舟**]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=13.5%
|X-end=27%
|Y-start=43.6%
|Y-end=84.6%
|text=**中君**]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=30.8%
|X-end=46.8%
|Y-start=46.6%
|Y-end=86%
|text=中君的侍女（右近）]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=2%
|X-end=14.8%
|Y-start=44%
|Y-end=86.5%
|text=中君的侍女]]

[[include :scp-wiki-cn:component:image-annotator
|X-start=73.2%
|X-end=100%
|Y-start=37.4%
|Y-end=95.1%
|text=中君的侍女]]

[[include :scp-wiki-cn:component:image-annotator-block-end
|caption=《源氏物语绘卷》东屋一。中君为让悲痛中的浮舟听绘卷故事解闷，让侍女右近为她朗读。]]

生成器

您也可以使用下面的生成器可视化设置注释。移动端操作可能比较困难，敬请谅解。

‡ 授权 / 引用‡ 隐藏授权 / 引用

请按如下方式引用此页：

“图片注释君-参考文档”，作者 Witherite，来自 SCP-JP 维基。原文链接：https://scp-jp.wikidot.com/reference:image-annotator。译者 NiaGba，来自 SCP-CN 维基。译文链接：/reference:image-annotator。遵循 CC BY-SA 协议。

更多详情请参阅授权指南。

文件页：Image Annotator - Image 0

标题：Leonardo da Vinci (1452-1519) - The Last Supper (1495-1498).jpg
著作权人：Leonardo da Vinci
来源： https://commons.wikimedia.org/wiki/File:Leonardo_da_Vinci_(1452-1519)_-_The_Last_Supper_(1495-1498).jpg
License：公有领域/CC0
发布年份：1495至1498间

文件页： Image Annotator - Image 1

标题：Hamlet.jpg
著作权人：不明
来源： https://commons.wikimedia.org/wiki/File:Hamlet.jpg
License：公有领域/CC0
发布年份：1605

文件页： Image Annotator - Image 2

标题：Genji emaki azumaya.jpg
著作权人：Imperial court in Kyoto
来源： https://commons.wikimedia.org/wiki/File:Genji_emaki_azumaya.jpg
License：公有领域/CC0
发布年份：约公元1130

jp文章
页面版本：⁨0⁩, 最后编辑于: ⁨2026/3/4 02:40:14⁩ (⁨⁨196⁩ 日前⁩), 现时评分: 14
历史 附件 + 选项