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  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?

CodePudding user response：

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

CodePudding user response：

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