Question 43687 in Html Question posted in
Some basic documentation can be found here.

Imagemap links aren't showing up – Html

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>
Tags:

2

Answers


  1. 0

    You can also try this. I managed to add the Farm on the map area.

    html {
    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: center;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    height: 100%;
    width: 10vw;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-flow: column nowrap;

    justify-content: center;
    align-items: center;
}

.sidebar ul {
    flex: 1 0 auto;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.sidebar li {
    margin: 10px 0;
    padding: 5px;
    text-align: center;
    color: white;
    font-size: 20px;
    flex-flow: inherit;
}

.sidebar li:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.content {
    position: relative;
    width: fit-content;
}

img {
    object-fit: cover;
    z-index: 0;
    display: block;
    width: auto;
    height: auto;
    zoom: .4;
}

body {
    overflow: auto;
    width: 100%;
    height: 100%;
    display: inherit;
    margin: 0;
    padding: 0;
    justify-content: inherit;
    align-items: inherit;
}
    <body>

    <div class="content">
        <img src="https://i.ibb.co/PNcPCR3/breeland.jpg" usemap="#image-map" />
        <map name="image-map">
            <area alt="Farm" title="Farm" href="#" coords="1790,790,2220,940" shape="rect">
        </map>
    </div>

    <div class="sidebar">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>
</body>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search