How to revive an image?

Question

JavaScript

Hello.

There is such a layout, there are letters, on hover the house should be highlighted.
A modal window should open on click.
What technologies to use to achieve the goal?

Answer 1

Advise ... Change backgrounds - forget it. HTML area - also bury.
Take your picture. On top of the buildings create a vector path (circle the buildings).
Mark up the drawn paths as you like, it will be enough to hang a class for further styling by hover + significant information for the tooltip / click / whatever else in the data attributes.

<svg ...>
  <path class="area" data-id="1" d="..." />
  <path class="area" data-id="2" d="..." />
</svg>

Inline the resulting structure onto the page. The background can be in a separate element and the map on top, you can sew it directly into SVG - it doesn’t matter.
On the hover on the path - through CSS you make it a translucent fill, judging by the picture, it just fills with a solid color on hover - the easiest option.
By clicking on the path - get its `data-id` and display some information.
Here is an example of an article that describes in more detail.
https://css-tricks.com/svg-map-rollovers/
There is an interactive example at the end.
The fundamental difference with your task is that you initially need paths with no fill and an image below them.

Answer 2

In Adobe Illustrator, draw contours and plates and info over the hulls, save a copy as .. SVG. Take the code and paste it into HTML. Display over bitmap.
Give an id to the outline and plate shapes. Do not confuse, as I did: the plates come out for the wrong contours.
JS can use these id's to access SVG elements as normal HTML elements, and listen for events on them. Highlight the contour on mouse over, show the sign brighter:

Answer 3

Ready source solution

Answer 4

In svg, put your picture as a background, place contours on top of the houses,
here is an elementary example:

And here, without an SVG editor, you can simply click on the image with the mouse to get the coordinates for the outline.
jsfiddle.net/Stalk/kLvnc9ru

Answer 5

I would track the position of the cursor and just change the background to a picture where the house is highlighted. But it's probably too resource intensive.