Browser game - Clickable Areas to an Image

I am trying to make a clone of a popular browser game called Travian. There is a /farms page where the user has an overview of all it's farms (I assume for now that the position of each kind of farm is always the same). Each farm can be upgraded to another level (up to 20) and the current level will be displayed on the /farms page. If the current farm level is 0, then no number will be displayed.

The issue I have is on that same png picture there should be 20 different a links for each resource and this is going to be done when the user will click on any of the white circle. How can I achieve that?

Dare I say it. But possibly html image maps is a potential solution.

https://www.w3schools.com/html/html_images_imagemap.asp

The technique isn't widely used in modern development practices mind you, as they aren't good on mobile. Svg alternative might be worth looking at too.

http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps