Image Map
Map: https://watabou.itch.io/medieval-fantasy-city-generator Find Image coordinates: https://www.image-map.net
HTML
<img src="https://cdn.masto.host/pinkorangered/media_attachments/files/114/352/177/239/547/846/original/e568e17289193b2f.png" alt="Workplace" usemap="#map">
<map name="map">
<area target="_blank" alt="mastodon" title="Pink Orange Red" href="https://pinkorange.red" coords="460,162,396,47,237,78,224,252,365,344,429,307,384,287" shape="poly">
<area target="_blank" alt="pleroma" title="Sea, Swallow Me" href="https://seaswallow.me" coords="237,128,220,179,226,255,184,270,132,195,67,84,126,59,168,78,189,99,239,87" shape="poly">
<area target="_blank" alt="writefreely" title="Rilkean Heart" href="https://tale.violaine.xyz" coords="460,171,420,219,388,284,431,304,500,261,506,223,471,171" shape="poly">
<area target="_blank" alt="nextcloud" title="Violaine" href="https://violaine.xyz" coords="224,278,271,288,235,356,179,346,180,310" shape="poly">
<area target="_blank" alt="nextcloud talk" title="Milk And Kisses" href="https://chat.violaine.xyz" coords="276,290,238,357,297,367,345,356,316,312,292,291" shape="poly">
<area target="_blank" alt="owncast" title="Eyes Are Mosaics" href="https://tv.seaswallow.me" coords="436,85,485,100,526,129,488,156,460,131" shape="poly">
<area target="_blank" alt="status" title="uptimerobot" href="https://stats.uptimerobot.com/kvPVxIYx30" coords="342,8,253,37" shape="rect">
</map>