What are the ways to make clickable areas in the picture?

Question

css

I will open words with detailed information when clicking on a section of the plan.
How can this be done?
I heard about <map> и <area>, but maybe there are better options for this?

Answer 1

It all depends primarily on what browsers you need to support. If only modern, then definitely SVG. True, I don’t understand why the implementation proposed by Maxim Timofeev uses some kind of crap with <object>, because nothing prevents inserting <svg> inside HTML directly.
You don’t even need to draw the map in vector, because you can insert the image inside the SVG, and then overlay transparent polygons on top, which are highlighted when you hover.
codepen.io/GreatRash/pen/PZgrVX

Answer 2

I like this implementation: habrahabr.ru/post/127994

Answer 3

cut pictures and make it all up