Imagine a scenario where you have one picture with a maximum width of 1200px and a relative width of 85%. Now, on top of this image lies another smaller picture that acts as a link. This second picture was cropped from the first to serve its link purpose.
The challenge is in positioning these images using absolute values. No matter how much I adjust the numbers, they only seem to fit perfectly at one specific point when resizing the viewport.
My goal is to create multiple clickable parts within an image, resembling a menu. The example I aspire to achieve can be seen here, but with resizable images.
Displayed below is my current code along with the image links: Link with the images
Any guidance or assistance on this matter would be greatly appreciated! Thank you!
body {
width: 100%;
background: black;
}
div#bgrImg {
max-width: 1200px;
width: 85%;
position: absolute;
left: 7.5%;
top: 8.3%;
}
#bgrImg img {
width: 100%;
}
div#signLink {
max-width: 1200px;
width: 85%;
position: absolute;
left: 7.5%;
top: 26%;
}
#signLink img {
width: 22%;
position:absolute;
left: 51.5%;
}
#signLink:hover {
cursor: pointer;
}<html>
<body>
<div id="bgrImg">
<img src="_images/hillBgr.jpg" />
</div>
<div id="signLink">
<a href="index.htm"><img src="_images/hillSign.png"/></a>
</div>
</body>
</html>