How to make a heatmap better?

Question

css

Good afternoon! The TOR is such that you need to make a click map (there is a picture of the shopping center workshop, and it is necessary that when hovering over each segment-pavilion, a reaction is given).
Site on WP. The first thing that comes to mind is, of course, to do it on the forehead.

<area shape="poly" coords="113,24,211,24,233,0,137,0" alt="Магазин 1">

Are there any more elegant solutions?

Answer 1

Why don't you want to make it a plugin?
https://wordpress.org/plugins/draw-attention/

Answer 2

There is also SVG.
https://parall.ax/blog/view/2985/tutorial-creating...

Answer 3

And do not forget to screw something for "responsive", otherwise you change the picture and the zones will move out of their places. For example this .