我有一个很长的图像(大约2-3个屏幕长)，我需要使它上的某些点可点击，以显示带有图像的描述性div(如工具提示)。这是一个Wordpress页面。我在网上看到的解决方案，如果图像比窗口小，但我需要一个工作在一个长，可滚动的图像。有解决方案吗?
根据图像衡量一切。它的宽度，高度，每个可点击区域的中心位置从图像的左侧和顶部以及每个可点击区域的宽度和高度。这些设置为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>将SVG与SMIL结合使用可能会很有趣。我对SMIL相当陌生，您可能需要在某个地方添加一些JS。但这可能会让你开始。这将不得不使用嵌入的SVG，因为如果使用图像标记添加click将无法工作。
<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>