I'm trying to have a fully responsive resizable image of a map with some image map links on it, a simple page.
But I can't get this to work after already trying countless time, not even with some scripts it worked, but using the correct percentage values for coordinates I think it should work but not sure why they won't show up.
I'm a html newbie, just trying to do this for a hobby project. But surely it is possible?
Here is my code:
body {
margin: 0;
padding: 0;
background-image: url(https://r4.wallpaperflare.com/wallpaper/222/498/544/abstract-ancient-antique-art-wallpaper-ed9498c67de1d4a3a5e6a63f97c0653e.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: left;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 50vh;
width: 10vw;
background-color: rgba(0, 0, 0, 0.2);
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.sidebar li {
margin: 10px 0;
padding: 5px;
width: 100%;
text-align: center;
color: white;
font-size: 20px;
}
.sidebar li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.content {
margin: 0;
padding: 0;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.content map {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
z-index: 1;
opacity: 44;
}<div class="content">
<img src="https://i.ibb.co/PNcPCR3/breeland.jpg" usemap="#image-map">
<map name="image-map">
<area target="" alt="Farm" title="Farm" href="https://i.ibb.co/PNcPCR3/breeland.jpg" coords="53.41%, 29.21%, 42.45%, 34.07%" shape="rect">
<area target="" alt="hhhggdfg45 " title="hhhggdfg45 " href="https://i.ibb.co/PNcPCR3/breeland.jpg" coords="89.02%, 57.16%, 11.15%, 76.29%" shape="rect">
</map>
</div>
<div class="sidebar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>I'm fairly sure you cannot make this responsive in this way without Javascript. (I'm also a bit of a beginner, so don't pin me down on this) This is because the coords have to be specific points on your image that cannot be defined with percentages.
However, you can use alternative means.
If you throw traditional image mapping out the window, and just put your image in a div that's 100% width and position:relative, you can then add smaller divs to that div that are position:absolute. Those you can position with percentages. I'm fairly sure you can also size those with percentages. Then you add the links to those divs, and you've got yourself a responsive alternative to the image map.