这是什么？
这是一个用于实现当鼠标悬停于插图上时显示注释的组件，可以用于说明插图中的人物或物体、或是翻译插图中的外语。灵感来源于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-background | 255, 255, 255 █ | 注释框背景色，使用RGB值设置。 |
| --annotation-background-opacity | 0 | 注释框背景色的不透明度，0为透明，1为完全不透明。 |
| --annotation-border | 255, 255, 0 █ | 注释框边框的颜色，使用RGB值设置。 |
| --annotation-hovered-background | 255, 255, 0 █ | 悬停时注释框的背景色，使用RGB值设置。 |
| --annotation-hovered-background-opacity | 0.5 | 悬停时注释框背景色的不透明度，0为透明，1为完全不透明。 |
| --annotation-hovered-border | 255, 127, 0 █ | 悬停时注释框边框的颜色，使用RGB值设置。 |
| --annotation-hovertip-color | 51, 51, 51 █ | 悬停提示框的文字颜色，使用RGB值设置。 |
| --annotation-hovertip-background | 255, 255, 255 █ | 悬停提示框的背景色，使用RGB值设置。 |
| --annotation-hovertip-border | 96, 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）
使用例
生成器
您也可以使用下面的生成器可视化设置注释。移动端操作可能比较困难，敬请谅解。
_-_The_Last_Supper_(1495-1498).jpg){kind=link}
