I have an image that is long (about 2-3 screens long), and I need to make certain points on it clickable to display a descriptive div with an image (like a tooltip). And this is for a Wordpress page. The solutions I've seen online work if the image is smaller than the window, but I need one that works on a long, scrollable image. Any solutions?
CodePudding user response：
Measure everything in terms of the image. Its width, height, central position of each clickable area from left and top of the image and the width and height of each clickable area. These are set as CSS variables and CSS can calculate the relevant %s so the system is responsive, adjusting to any viewport dimensions/aspect ratio.
The image can then be put as a background to a containing div with the right aspect ratio and a given width. Each child div is a clickable area.
In this snippet the text about an area simply shows on hover on a pseudo element just for demo purposes. You will probably want to put clickable elements there, perhaps of type radio and reveal more complex info on click.
The snippet has two clickable areas, scroll down to see the second. They have been given borders just for the demo.
.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>CodePudding user response：
It might be fun to do this as an SVG with SMIL. I'm fairly new to SMIL and you probably will need to add in some JS somewhere. But this might get you started. This will have to use an embedded SVG as click won't work if it's added in using an image tag.
<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>