Detect clickable areas within <img> tag in Ionic project

Question

I have static image like below, within image various buttons are there like Main,F1, F2 etc., need to make those buttons clickable and call api. In what all ways we can achieve this scenario's, any leads would be very helpful.

Answer 1

It would be better to not use an image. it would be better to do your buttons in HTML and style them as you wish. You could also create the buttons in HTML and set the background of the button, as an image.

if you really want to use this image, you should create some button, make them transparent with CSS and place them (maybe with absolute position) over the image in the corrisponding spots

Edit (thanks Christoph Rackwitz):

probably the best solution would be to use the <map> tag: https://www.w3schools.com/tags/tag_map.asp

The tag is used to define an image map. An image map is an image with clickable areas.