Overlapping images for modular map

Hello, hit another roadblock.

I did most of the artistic legwork thinking coding should be simple, but it’s proving a lot harder than anticipated.

I have a modular map, consisting of a fully solid “aged paper” .png and many transparent background “room” .pngs. They are all the same size, so when layering all the rooms ontop each other, you fill out your map. So I was hoping, when a player visits a passage, the game runs a history check, and then displays that room on your map, giving the illusion of exploration.

I tried to look up solutions for layering images but none seem to work, this code was the closest solution I could find, but it tends to jumble the images up and the solid-colored background image always vanishes for some reason.

img style=“z-index: -1;” src="image-of-a-forest’ " />
img style=“z-index: 1; position: absolute; left: 50px; top: 50px;” src=“image-of-characterA” />
img style=“z-index: 1; position: absolute; left: 200px; top: 50px;” src=“image-of-characterB” />

(< removed because it was reeking havoc with blockquote)

Anyone know why that might be happening? Or how to solve this issue?

Twine Version: 2.3.14
Story Format: Harlowe 3.2.2.

Edit: I’ve been reading up on CSS, but it’s another level of complexity for someone starting off, and this code makes less “sense” for a newbie than harlowes boiled down code.

1 Like

There is an error in the first line, you have an extra quote after forest

’”

I don’t see any obvious problems with the other lines. When I tried it, I had to change the curved quotes to straight quotes for it to work, though.

My apologies it may have been a typo on my part.

I just tried it again, the base image still disappears and the supplemental images that go on top are still jumbled up all over the place despite being the same size.

Use the Preformatted text option when including a code example in your comment, it knows how to handle code and stops the forum’s software converting valid Standard quotes into invalid Typographical (curvy) quotes.

One of the potential issues you are likely having with your solution is the <br> elements that are automatically being added to the generated HTML for each new-line you include in your Passage content. You can get around this behaviour by wrapping your <img> elements within Collapsing whitespace markup.

{
<img style="z-index: -1;" src="image-of-a-forest" />
<img style="z-index: 1; position: absolute; left: 50px; top: 50px;" src="image-of-characterA" />
<img style="z-index: 1; position: absolute; left: 200px; top: 50px;" src="image-of-characterB" />
}

Another issue you’re likely to have with Harlowe is dynamically generating the required <img> elements so that they reference the correct image for each Row & Column position in your grid. You could possible use the (print:) macro to achieve this outcome.
note: I don’t know how you’re tracking which image needs to be displayed at each Row & Column position in your grid so the following includes some temporary variables that the example assumes have previously been assigned the ‘correct’ values.

(print: '<img style="z-index: 1; position: absolute; left: ' + (str: _column) + 'px; top: ' + (str: _row) + 'px;" src="' + _image + '" />')

While you can use absolute positioning and z-indexing to build a multi-layer grid/table of images, you may find it easier to use the grid CSS feature. This A Complete Guide to Grid article on the CSSTricks site may help you understand that feature.

1 Like

Thank you for the reply! I tried to add the Collapsing whitespace marks, but for some reason the images fail to load then, I get a broken link icon. Removing them fixes this.