How to make an active card?

Question

css

There is a map of the Rostov region. How can you place it on the site in such a way that when you hover over the Millerovsky district, it will light up in a different color and when you click on this area, a link to another site opens?

Answer 1

Render all areas in SVG and style them on hover.
The simplest example: https://jsfiddle.net/Stalk/4xv4pk8j/1/
There are SVG editors and libraries that make it easier to work with canvas.

Answer 2

All google for canvas

Answer 3

look at this option https://www.react-simple-maps.io/ I also did it through this link https://github.com/DmitryBaranovskiy/raphael yes it is old but it performs its function