Wordpress上大图像上的可点击区域地图(需要滚动)
Wordpress上大图像上的可点击区域地图(需要滚动)
提问于 2021-09-14 19:44:48
我有一个很长的图像(大约2-3个屏幕长)，我需要使它上的某些点可点击，以显示一个描述性的div与图像(如工具提示)。这是一个Wordpress页面。我在网上看到的解决方案，如果图像比窗口小，就能工作，但我需要一个能处理长的可滚动图像的解决方案。有什么解决方案吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-09-15 07:55:34
根据图像来衡量一切。它的宽度、高度、每个可点击区域的中心位置(从图像的左上角开始)以及每个可点击区域的宽度和高度。这些变量被设置为CSS变量，并且CSS可以计算相关的%s，因此系统可以响应，可以根据任何视口尺寸/纵横比进行调整。
然后，可以将图像作为背景放置到具有正确纵横比和给定宽度的包含div中。每个子div都是一个可点击的区域。
在这段代码中，关于一个区域的文本仅在一个伪元素上悬停显示，仅用于演示目的。你可能想把可点击的元素放在那里，也许是类型为radio的，并在点击时显示更复杂的信息。
代码段有两个可单击的区域，向下滚动查看第二个区域。它们被赋予边框仅仅是为了演示。
.bg {
--w: 500;
/* measured width of the image */
--h: 1500;
/* measured height of the image */
width: 100vw;
height: calc(var(--h) / var(--w) * 100vw);
background-image: url(https://picsum.photos/id/238/500/1500);
background-size: 100% auto;
margin: 0;
padding: 0;
border: none;
position: relative;
}
.bg div {
position: absolute;
left: calc((var(--dpx) - (var(--dpw) / 2)) / var(--w) * 100%);
top: calc((var(--dpy) - (var(--dph) / 2)) / var(--h) * 100%);
width: calc(var(--dpw) / var(--w) * 100%);
height: calc(var(--dph) / var(--h) * 100%);
border: 2px magenta solid;
/* put in just for demo so you can see the areas */
display: inline-block;
}
.bg div[data-point="The very top"] {
--dpx: 240;
/* measured distance of the central point of the area from the left of the image */
--dpy: 65;
/* measured distance of the central point of the area from the top of the image */
--dpw: 10;
/* width of the clickable area */
--dph: 20;
/* height of the clickable area */
}
.bg div[data-point="Water towers"] {
--dpx: 418;
--dpy: 1155;
--dpw: 40;
--dph: 40;
}
.bg div:hover::after {
content: attr(data-point);
position: absolute;
top: 0;
left: 0;
display: inline-block;
z-index: 1;
background-color: black;
color: white;
}<div class="bg">
<div data-point="The very top"></div>
<div data-point="Water towers"></div>
</div>
Stack Overflow用户
发布于 2021-09-15 05:26:58
用SMIL作为SVG来做这件事可能很有趣。我是SMIL的新手，您可能需要在某个地方添加一些JS。但这可能会让你开始。这将必须使用嵌入式SVG，因为如果使用图像标记添加单击将不起作用。
<svg id="imageTooltip" class="image-tooltip" version="1.1" width="400" height="5000" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; display: inline-block; overflow: hidden;" preserveAspectRatio="xMinYMin" viewBox="0 0 400 5000">
<desc></desc>
<g class="image">
<image class="large-image"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAABOICAMAAACopcvvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMC1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMi41IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjY3NkZBRDg3MERGQTExRUNCRkRFRkRCOTQyNUZFMjgyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjY3NkZBRDg4MERGQTExRUNCRkRFRkRCOTQyNUZFMjgyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Njc2RkFEODUwREZBMTFFQ0JGREVGREI5NDI1RkUyODIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Njc2RkFEODYwREZBMTFFQ0JGREVGREI5NDI1RkUyODIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Sk+OLAAAABlBMVEXQ0NAAAAAY+GMgAAAHsElEQVR42uzBMQEAAADCoPVPbQlPoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAtwkwAJnKAAEayncwAAAAAElFTkSuQmCC"
opacity="1"
width="100%"
height="100%"></image>
</g>
<g class="tooltips">
<g class="tooltip0-area">
<circle
id="activateTooltip0"
class="activate-tooltip-0"
style="cursor: pointer;"
r="15"
cx="30"
cy="30"
fill="#FE5100"
stroke="#000000"
stroke-width="1">
<animate
attributeName="r"
begin="activateTooltip0.click"
dur="0.3s"
from="15"
to="0"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="r"
begin="toolTip0.click"
dur="0.3s"
from="0"
to="15"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="fill"
begin="0s"
dur="5s"
values="#FE5100; #30BF09; #FE5100"
repeatCount="indefinite">
</animate>
</circle>
<g
id="toolTip0"
class="tool-tip-0"
style="cursor: pointer;">
<rect
width="0"
height="30"
x="25"
y="15"
fill="#000000">
<animate
attributeName="width"
begin="activateTooltip0.click"
dur="0.3s"
from="0"
to="240"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="width"
begin="toolTip0.click"
dur="0.3s"
from="240"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</rect>
<text
font-size="0"
fill="#FFFFFF"
x="35"
y="35">
ToolTip 0
<animate
attributeName="font-size"
begin="activateTooltip0.click"
dur="0.3s"
from="0"
to="14"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="font-size"
begin="toolTip0.click"
dur="0.3s"
from="14"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</text>
</g><!-- tool-tip-0 -->
</g><!--end tooltip0-area -->
<g class="tooltip1-area">
<circle
id="activateTooltip1"
class="activate-tooltip-1"
style="cursor: pointer;"
r="15"
cx="30"
cy="150"
fill="#FE5100"
stroke="#000000"
stroke-width="1">
<animate
attributeName="r"
begin="activateTooltip1.click"
dur="0.3s"
from="15"
to="0"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="r"
begin="toolTip1.click"
dur="0.3s"
from="0"
to="15"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="fill"
begin="0s"
dur="5s"
values="#FE5100; #30BF09; #FE5100"
repeatCount="indefinite">
</animate>
</circle>
<g
id="toolTip1"
class="tool-tip-1"
style="cursor: pointer;">
<rect
width="0"
height="30"
x="25"
y="135"
fill="#000000">
<animate
attributeName="width"
begin="activateTooltip1.click"
dur="0.3s"
from="0"
to="240"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="width"
begin="toolTip1.click"
dur="0.3s"
from="240"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</rect>
<text
font-size="0"
fill="#FFFFFF"
x="35"
y="155">
ToolTip 1
<animate
attributeName="font-size"
begin="activateTooltip1.click"
dur="0.3s"
from="0"
to="14"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="font-size"
begin="toolTip1.click"
dur="0.3s"
from="14"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</text>
</g><!-- tool-tip-1 -->
</g><!--end tooltip1-area -->
<g class="tooltip2-area">
<circle
id="activateTooltip2"
class="activate-tooltip-2"
style="cursor: pointer;"
r="15"
cx="30"
cy="550"
fill="#FE5100"
stroke="#000000"
stroke-width="1">
<animate
attributeName="r"
begin="activateTooltip2.click"
dur="0.3s"
from="15"
to="0"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="r"
begin="toolTip2.click"
dur="0.3s"
from="0"
to="15"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="fill"
begin="0s"
dur="5s"
values="#FE5100; #30BF09; #FE5100"
repeatCount="indefinite">
</animate>
</circle>
<g
id="toolTip2"
class="tool-tip-2"
style="cursor: pointer;">
<rect
width="0"
height="30"
x="25"
y="535"
fill="#000000">
<animate
attributeName="width"
begin="activateTooltip2.click"
dur="0.3s"
from="0"
to="240"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="width"
begin="toolTip2.click"
dur="0.3s"
from="240"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</rect>
<text
font-size="0"
fill="#FFFFFF"
x="35"
y="555">
ToolTip 2
<animate
attributeName="font-size"
begin="activateTooltip2.click"
dur="0.3s"
from="0"
to="14"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="font-size"
begin="toolTip2.click"
dur="0.3s"
from="14"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</text>
</g><!-- tool-tip-2 -->
</g><!--end tooltip2-area -->
<g class="tooltip3-area">
<circle
id="activateTooltip3"
class="activate-tooltip-3"
style="cursor: pointer;"
r="15"
cx="30"
cy="1550"
fill="#FE5100"
stroke="#000000"
stroke-width="1">
<animate
attributeName="r"
begin="activateTooltip3.click"
dur="0.3s"
from="15"
to="0"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="r"
begin="toolTip3.click"
dur="0.3s"
from="0"
to="15"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="fill"
begin="0s"
dur="5s"
values="#FE5100; #30BF09; #FE5100"
repeatCount="indefinite">
</animate>
</circle>
<g
id="toolTip3"
class="tool-tip-3"
style="cursor: pointer;">
<rect
width="0"
height="30"
x="25"
y="1535"
fill="#000000">
<animate
attributeName="width"
begin="activateTooltip3.click"
dur="0.3s"
from="0"
to="240"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="width"
begin="toolTip3.click"
dur="0.3s"
from="240"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</rect>
<text
font-size="0"
fill="#FFFFFF"
x="35"
y="1555">
ToolTip 3
<animate
attributeName="font-size"
begin="activateTooltip3.click"
dur="0.3s"
from="0"
to="14"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="font-size"
begin="toolTip3.click"
dur="0.3s"
from="14"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</text>
</g><!-- tool-tip-3 -->
</g><!--end tooltip3-area -->
<g class="tooltip4-area">
<circle
id="activateTooltip4"
class="activate-tooltip-4"
style="cursor: pointer;"
r="15"
cx="30"
cy="2550"
fill="#FE5100"
stroke="#000000"
stroke-width="1">
<animate
attributeName="r"
begin="activateTooltip4.click"
dur="0.3s"
from="15"
to="0"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="r"
begin="toolTip4.click"
dur="0.3s"
from="0"
to="15"
fill="freeze"
repeatCount="1">
</animate>
<animate
attributeName="fill"
begin="0s"
dur="5s"
values="#FE5100; #30BF09; #FE5100"
repeatCount="indefinite">
</animate>
</circle>
<g
id="toolTip4"
class="tool-tip-4"
style="cursor: pointer;">
<rect
width="0"
height="30"
x="25"
y="2535"
fill="#000000">
<animate
attributeName="width"
begin="activateTooltip4.click"
dur="0.3s"
from="0"
to="240"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="width"
begin="toolTip4.click"
dur="0.3s"
from="240"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</rect>
<text
font-size="0"
fill="#FFFFFF"
x="35"
y="2555">
ToolTip 4
<animate
attributeName="font-size"
begin="activateTooltip4.click"
dur="0.3s"
from="0"
to="14"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
<animate
attributeName="font-size"
begin="toolTip4.click"
dur="0.3s"
from="14"
to="0"
fill="freeze"
calcMode="linear"
repeatCount="1">
</animate>
</text>
</g><!-- tool-tip-4 -->
</g><!--end tooltip4-area -->
</g><!-- end tool tips -->
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69183727
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号