0

first check out the image for a better understanding of what I want to do. The red points on the picture will be clickable. When you click on them a description will pop up.

I saw the use of HTML <area> tag and a JS function with image coordinates.

Is there any ready made library available for this ?

Roof Image

tuhi009
  • 29
  • 2
  • 9

1 Answers1

1

You're best off making use of an <img> and the <map> element. From here you can set <area> children with a circular shape, and specify the the co-ordinates. These are in the format x,y from the top-left pixel. With a circle, the third value is the diameter. You can link these off, or attach an event handler to display a popup:

img {
  height: 100%;
}

area {
  fill: blue;
}
<img src="https://i.stack.imgur.com/q9ZX6.png" usemap="#housemap">

<map name="housemap">
  <area shape="circle" coords="0,0,82,126" href="1.htm" alt="1">
  <area shape="circle" coords="190,58,30" href="2.htm" alt="2">
  <area shape="circle" coords="90,58,30" href="3.htm" alt="3">
  <area shape="circle" coords="90,58,30" href="4.htm" alt="4">
</map>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • yes I have explored this solution. I was thinking maybe I can find a JS Library for this sort of stuff. But after a bit of searching I found no such thing. – tuhi009 Feb 26 '19 at 21:11