If I understand your question correctly you want to do the following:
a. Display an image (a Map?) within a particular Passage.
b. You want to display markup based links on top of this image in set locations/positions.
The following steps implement one way you could archive that outcome.
1. Identifying the Map Passage.
I suggest assigning the relevant Passage a know Passage Tag (like map) which you can target in your CSS.
2. Displaying the image (Map) when the Map Passage is shown.
I suggest using CSS within your story"s Story Stylesheet area to allocate a background image (the Map) to the tagged Passage, I suggest using a background image because that will make it easier to display the links on top of the image. Harlowe uses a tw-passage element to represent the area to that the current Passage content is displayed in, and that element will contain the current Passage's tag list within it's tags attribute.
tw-passage[tags~="map"] {
background-image: url('media/map.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 800px;
}
note: I don't know the name or dimensions of your image, so you will need to edit the above CSS to suit your needs. The tw-passage will need a height (in relation to the image's height) to force the element to be large enough to contain the image. You may also want to use other background related CSS attributes.
3. Uniquely identifying each markup based link.
Your example infers that each markup based link will target a different Passage (eg. room1, room2, etc), if that is true then you can use that information to uniquely identify each markup based link. Each the tw-link element created to represent each markup based link will contain a passage-name attributed which is assigned the name of the relevant Target Passage. The HTML for a markup based link looks like the following:
<tw-expression type="macro" name="link-goto">
<tw-link tabindex="0" passage-name="room1" data-raw="">Go to Room 1</tw-link>
</tw-expression>
4, Using CSS to re-position each individual markup based link.
The follow demonstrates the type of CSS you will need to place within your Story Stylesheet area to position a particular markup based link in a particular location/position on top of the image.
tw-passage[tags~="map"] tw-link[passage-name="room1"] {
width: 10em;
position: absolute;
top: 5em;
left: 3em;
}
The above uses the passage-name attribute to indicate which markup based link to target, it assigns a width to the element to make sure it is wide enough to show the relevant Link Text without wrapping, and it includes both a top & left attribute to correctly position the starting point of the tw-link element.
note: You would need to change at least the passage-name attribute and the top / left attribute(s) for each markup based link being shown. I suggest reading up on CSS to determine if there are any other attributes you may wish to use.