Adding Editable Text Links on Top of Image?

Background

I have several hotspots (image hyperlinks) located on different areas of an image. The image consists of a screenshot of a number of hexagons with embedded text (part of the image). When the user clicks a hexagon with "Training" on it, the site takes the user to the Training Page.

Problem

My problem is this - I want to make this image editable. In the future, if I wish to change the "Training" hex to "Supplies" instead, I cannot edit the text (though I can easily change the hotspot hyperlink).

Solutions?

Is there a way to make text "float" above certain hotspots? If I had "Training" text floating above the Training hotspot, so that it could be edited but not interfere with the hotspot, that would be ideal.

Or, any other ways. I have very little experience with coding. Thank you.