So I've run into a problem trying to make objects on a image clickable. I have an Image with 3 Objects that I want to link to 3 different pages / execute 3 different functions onclick.
Now my problem occurs when I resize my window. The Image having the following style to always display the objects, even if I resize the window and fill up the entire screen.
img {
object-fit: cover;
object-position: center;
width: 100%;
height: calc(100vh - 90px);
}
Since the objects are pretty big and when I resize, to let's say mobile view, the links will overlap and be bigger then the screen itself.
This is the current HTML Structure, which I can change.
<div>
<img src="img/steintafelAussen.jpg" alt="Kircheneingang" />
<div class="buttons">
<button class="btn-1"></button>
<button class="btn-2"></button>
<button class="btn-3"></button>
</div>
</div>
Now my question is, would it be possible to kinda map the buttons sizes and positions to the image, that the rescale automatically, or would i need to use media-queries to achieve that?
I was thinking of tracking the initial scale of the image someone and applying that to the links with transform: scale();, maybe?
Could I use a transparent SVG that is placed over the image, has 3 objects with eventListeners instead of links?
Using JS is fine, since it is a vue 3 application.
I have solved the problem by putting a SVG of the same size over the Image and adding eventListeners to the Paths of the Links. Leading to the following code:
.wrapper {
aspect-ratio: 4 / 3;
position: absolute;
max-height: calc(100vh - 90px); /*Calc because my header and footer are 40px and 50px otherwise it would be 100vh*/
margin: auto;
width: auto;
top: 40px; /*header is 40px*/
right: 0;
bottom: 50px; /*footer is 50px*/
left: 0;
}
.img,
.overlay-svg {
position: absolute;
max-height: 100%;
margin: auto;
width: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="wrapper">
<img
class="img"
src="/path/to/image"
/>
<svg
class="overlay-svg"
viewBox="0 0 2049 1537"
xmlns="http://www.w3.org/2000/svg"
>
<path
class="btn-svg"
d="M810 523V495.5L890 479.5H993.5L1090 495.5L1178 523V1311L787 1329.5L799.5 940.5L810 523Z"
/>
<path
class="btn-svg"
d="M1461 672L1808 585L1832 1537H1471.5L1461 672Z"
/>
<path
class="btn-svg btn-lamp"
d="M481 567L517 512L544 567L577 589.5L544 699L506.5 739.5L466 690L451 579L481 567Z"
/>
</svg>
</div>