How to make a selection of individual areas on a static map image?

M

Mks1632018-12-07 14:39:06

css

Mks163, 2018-12-07 14:39:06

Hello friends! There is a picture with a plan of land plots, when you click on the plots, a modal window with information on them will appear. What is the best way to implement this on a static jpg image (namely, a breakdown into separate areas in the same image)? Here is an example image:

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

AlexRas, 2018-12-07
@Mks163

You can use area:
htmlbook.ru/html/area
You can use regular links:
https://jsfiddle.net/7s69g4ky/
You can use svg:
https://habr.com/post/127994/
Here's another example:
https:// codepen.io/CreativeSeo33/pen/YwepVQ

V

vman, 2018-12-07
@vman

through the image map, there are services for creating them

<html>
    <body>
        <img width="500" height="200" usemap="#somemap" src="upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png">
        <map name="somemap">
            <area shape="rect" coords="6, 7, 140, 196" href="ru.wikipedia.org/Прямоугольник">
            <area shape="circle" coords="239, 98, 92" href="ru.wikipedia.org/Круг">
            <area shape="poly" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74, 386,16" href="ru.wikipedia.org/Многоугольник">
        </map>
    </body>
</html>

E

Eugene Chefranov, 2018-12-07
@Chefranov

htmlbook.ru/html/area