Wordpress 上大图像（需要滚动）上的可点击区域图
Clickable area map on a large image (requiring scrolling) on Wordpress
我有一张很长的图片（大约 2-3 个屏幕长），我需要将图片上的某些点设为可点击以显示带有图片的描述性 div（如工具提示）。这是针对 Wordpress 页面的。
如果图像小于 window，我在网上看到的解决方案有效，但我需要一个适用于可滚动的长图像的解决方案。
有什么解决办法吗？
使用 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>
一切以形象衡量。它的宽度，高度，每个可点击区域从图像左侧和顶部的中心位置以及每个可点击区域的宽度和高度。这些设置为 CSS 变量，CSS 可以计算相关的 %s，因此系统可以响应，调整到任何视口 dimensions/aspect 比率。
然后可以将图像作为背景放置到包含 div 的具有正确纵横比和给定宽度的图像中。每个 child div 是一个可点击区域。
在这个片段中，关于一个区域的文本仅仅显示在悬停在一个伪元素上只是为了演示目的。您可能希望将可点击的元素放在那里，可能是无线电类型，并在点击时显示更复杂的信息。
代码段有两个可点击区域，向下滚动以查看第二个区域。他们已经为演示提供了边框。
.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>
我有一张很长的图片（大约 2-3 个屏幕长），我需要将图片上的某些点设为可点击以显示带有图片的描述性 div（如工具提示）。这是针对 Wordpress 页面的。 如果图像小于 window，我在网上看到的解决方案有效，但我需要一个适用于可滚动的长图像的解决方案。 有什么解决办法吗？
使用 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>
一切以形象衡量。它的宽度，高度，每个可点击区域从图像左侧和顶部的中心位置以及每个可点击区域的宽度和高度。这些设置为 CSS 变量，CSS 可以计算相关的 %s，因此系统可以响应，调整到任何视口 dimensions/aspect 比率。
然后可以将图像作为背景放置到包含 div 的具有正确纵横比和给定宽度的图像中。每个 child div 是一个可点击区域。
在这个片段中，关于一个区域的文本仅仅显示在悬停在一个伪元素上只是为了演示目的。您可能希望将可点击的元素放在那里，可能是无线电类型，并在点击时显示更复杂的信息。
代码段有两个可点击区域，向下滚动以查看第二个区域。他们已经为演示提供了边框。
.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>