Get coordinates of a particular section of the image

Question

I want to add a text and link to both the sign boards here in this image (separately for both). I am trying to use the <map> <area> rule and I need to place the coordinates of the two rectangle boxes there so that once a user clicks on that board or text he will be redirected to some another page. Now the problem is that I am not sure from where to find the exact coordinates of the image here and how? If anyone can help then please help.

Here is the code I am using

<img src="image link here" usemap="#mapname">
    <map name="mapname">
      <area shape="rect" coords="" href="http://www.google.com" alt="TEST">
    </map>

Solution 1

I'm working on something similar, but I wanted to make it responsive - not if you zoom in, image will be bigger and areas too. I didn't use <map>, because the coords are absolute. I used this:

<div id="mapdiv">
  <img src="link" id="imgmap" alt="" />
    <a href="target"><div id="box1">Here is the text</div></a>
    <div id="box2" onclick="alert('You can use js too')"></div>
</div>

And CSS:

#imgmap {
    width: 100%;
    }
div#mapdiv {
    position: relative; /* thanks to this... */
    }
div#menu div {
    position: absolute; /* ...and this are boxes positioned relatively inside the imgdiv */
    border: 1px dashed blue; /* for finding coords, remove after you are done */
}
div#box1 {
    left: 21%; /* my coords, make your own by trying and trying... */
    top: 26.5%;
    height: 5%;
    width: 6.5%
    }
div#box2 {
    left: 7.5%;
    top: 66.2%;
    height: 24.5%;
    width: 31.5%;
    }

Solution 2

if you want to add text, then you better use real links and set them on top of your areas wich are quiet good rectangle.

example:

.map {
  position: relative;
}

.map img {
  display: block;
  width: 100%;
}

.map a {
  position: absolute;
  top: 48.6%;
  left: 9.118%;
  width: 19.8%;
  height: 19%;
  transform: rotate(-1.375deg);
  border-radius: 50% 50% 0px 0 / 0.25vw;
  transition: 0.5s;
  color:#3F4754;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:4vw;
  font-weight:bold;
  font-family:courier;
  font-variant:small-caps;
  text-decoration:none;
  text-shadow:-2px -2px 2px black
}

.map a + a {
  top: 48%;
  left: 70%;
  transform: rotate(3deg);
  transform-origin: bottom right
}

a:hover {
  color: white;
  background:linear-gradient(to bottom left, rgba(0, 0, 0, 0.5), transparent);
  text-shadow:2px 2px 2px black
}

<div class="map">
  <img src="https://i.stack.imgur.com/mDEuy.jpg" />
  <a href="#1">hover me</a>
  <a href="#2">or me</a>
</div>

use your own style and ids or class

Comments

[Michael Coker]

You can use tools like this to establish the coordinates for an image map image-maps.com

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.