热点和热点短代码允许您在图像上放置标记。访问者可以将鼠标移到这些标记上或选择这些标记来展开标签。列表中的热点短代码可以实现这一点
代码示例
[[hotspot image="/university-communications/wp-content/uploads/sites/144/ 2014/12/campus -aerial.jpg.5.2 . general .jpg"] [hotpoint left="39.6" top="63.5" label="Susan A. Cole Hall" url="/campus-map/#CO"] [hotpoint left="46.89" top="34.91" label="Freeman Hall"] [hotpoint left="64.44" top="33.5" label="Russ Hall"] [hotpoint left="73.55" top="44.79" label=“John J Cali音乐学院”][/hotspot]]
属性
热点商家
| 名字 | 可能的值 | 要求 | 笔记 |
|---|---|---|---|
| 图像 | 图片的Url | 是 | 图像URL应该是媒体库中的图像。 |
Hotpoint短码
| 名字 | 可能的值 | 要求 | 笔记 |
|---|---|---|---|
| 标签 | 文本 | 是 | 这是一个文本字段，而不是HTML。 |
| 左 | 数量 | 是 | 百分比中点的左边位置。 |
| 前 | 数量 | 是 | 在百分比中点的顶部位置。 |
| url | 页面URL | 否 | 如果您提供URL，热点将充当链接。 |
以百分比获取坐标
热点短代码要求您以百分比而不是像素为单位提供点的坐标。这可以确保你的点在任何分辨率或尺寸下都能被正确放置-从小型手机显示器到大型桌面显示器。
使用Adobe Photoshop，它是相对容易获得百分比坐标为您的图像。
步骤1：获取图像分辨率
在Photoshop中打开你的图像，然后点击图像>图像大小。在一张小纸片上写下图像的宽度和高度。
步骤2：以像素为单位获取坐标
选择尺子工具。点击并拖动你的图像，从你想放你的点的地方开始。复制您想要创建的每个热点的X和Y坐标。
第三步：计算百分比
现在你有了图像的宽度、高度、x和y值，你可以使用下面的公式轻松地计算左边和顶部的值：
- 左= 100 × （x/width）
- Top = 100 × （y/height）