Text on top of image map doesn't stick on window resizing

Question

I am doing something similar to this topic : Text on top of image map

My problem is that the titles are not exactly at the center of the circle area and they don't stick to the area mapped on my image when the window is resized, although the areas themselves are always correctly positioned when resizing the window. here is my code:

 <div id="molecule">
      <img src="./images/molecule-total.svg" alt="menu" usemap="#molecule-links">
      <map name="molecule-links">
        <area class="contact" shape="circle" coords="70,100,90" alt="Page1" data-name="Contact">
        <area shape="circle" coords="250,350,150" href="page2.html" alt="Page2" data-name="Home">
      </map>
  </div>

 #molecule {
    height: 80vh;
    width: 100vh;
    padding-left: 141px;
    padding-top: 15px;
    position: relative;
}

.map_title {
  position: absolute;
  z-index: 2;
}

img {
  min-height: 80%;
  max-height: 100%;
}

area {
  cursor: pointer;
  outline-color: white;
}

function displayLinksName() {
  const area = document.querySelectorAll("area");
  const map = document.querySelector("map")

  area.forEach(function(area){
    let txt = area.getAttribute('data-name')
    let coor = area.getAttribute('coords');
    let coorA = coor.split(',')
    let left = coorA[0];
    let top = coorA[1];
    let links = document.createElement('div');
    links.classList.add("map-title");
    links.innerHTML =  txt;
    links.style.top = top + 'px';
    links.style.left = left + 'px';
    links.style.position = 'absolute';
    links.style.color = 'red';

    map.append(links);
  })
}

It's like the coords of the area doesn't obey to the same rules than the CSS properties top and left. Is there a workaround to make it works properly?

score 1 · Answer 1 · answered Jan 16 '23 at 15:19

U can try to remake the javascript to update the position of the text based on the image position with onresize event:

window.addEventListener("resize", updateTextPosition);

function updateTextPosition() {
    var img = document.querySelector("img");
    var imgRect = img.getBoundingClientRect();

    var areas = document.querySelectorAll("area");
    areas.forEach(function(area) {
        var coords = area.getAttribute("coords").split(",");
        var left = coords[0];
        var top = coords[1];

        var text = area.nextElementSibling;

        text.style.left = (imgRect.left + parseInt(left)) + "px";
        text.style.top = (imgRect.top + parseInt(top)) + "px";
    });
}

Adittionally you can use CSS Media queries to adjust the text, for example when the window width is less than 800:

@media (max-width: 800px) {
    .map_title {
        top: 50px;
        left: 50px;
    }
}

This adjust the position of the text.

PS: You have an error in the javascript, it is written map-title and the css class is called map_title

Thanks @Andriu1510 for your complete answer, unfortunately, the behavior of the text is still the same. I think there is a problem with `var text = area.nextElementSibling;` It doesn't actually select the right div. I am searching on that! — cecileRx, Jan 16 '23 at 18:48

score 1 · Accepted Answer · answered Jan 18 '23 at 17:42

I finally found the easiest way to deal with maps on any image, without using map or area tag. Just using this generator: https://imagemapper.noc.io/#/ and add tags inside the SVG code provided by the generator. This comes from this discussion, which has lots of interesting ways to achieve this: Responsive image map

Text on top of image map doesn't stick on window resizing

2 Answers2