CODEWITHSUNDEEP
phpjquerycsshtml
user6224087
user6224087

Reputation:

Get coordinates of a particular section of the image

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>

enter image description here

Upvotes: 2

Views: 15839

Answers (5)

ThePhil
ThePhil

Reputation: 21

$(document).ready(function() {
  $("img").on("click", function(e) {
    bounds=this.getBoundingClientRect();
    var l = bounds.left;
    var t = bounds.top;
    var x = e.pageX - l;
    var y = e.pageY - t;
    var cw = this.clientWidth;
    var ch = this.clientHeight;
    var nw = this.naturalWidth;
    var nh = this.naturalHeight;
    var px = x/cw*iw;
    var py = y/ch*ih;        
  });
});

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106048

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.sstatic.net/mDEuy.jpg" />
  <a href="#1">hover me</a>
  <a href="#2">or me</a>
</div>

use your own style and ids or class

Upvotes: 1

adryledo
adryledo

Reputation: 34

You can use the mouse events clientX, clientY https://www.w3schools.com/jsref/event_clientx.asp

When you use onmousemove it shows the coordinates

<!DOCTYPE html>
<html>
<body>

<img src="https://i.sstatic.net/mDEuy.jpg" usemap="#mapname" 
    onmousemove="showCoords(event)">
    <map name="mapname">
      <area shape="rect" coords="" href="http://www.google.com" alt="TEST">
    </map>
</img>


<p id="demo"></p>

<script>
    function showCoords(event) {
        var x = event.clientX;
        var y = event.clientY;
        var coords = "X coords: " + x + ", Y coords: " + y;
        document.getElementById("demo").innerHTML = coords;
    }
</script>

</body>
</html>

Upvotes: 0

M. Volf
M. Volf

Reputation: 1492

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%;
    }

Upvotes: 1

Dave Jones
Dave Jones

Reputation: 193

I use a chrome extension I got called Page Ruler. What I do is use the extension to draw a rectangle from the pixel with the coordinate 0,0 to a target pixel. The bar at the top shows the width and height of the rectangle. There are also other tools, such as Meazure, which can do the same thing.

Upvotes: 0

Related Questions