I cannot get One Image On Top of Another example from the documentation to work. It simply displays the first image and not the second. http://docs.textadventures.co.uk/quest/images.html

 s = "<div style='position:fixed; left: 0px; bottom: 20px; width: 260 px; height: 670px;'>"
 s = s + "<img src='" + GetFileURL("gravestone.png") + "' style=\"position:absolute;top:0px;left:-200px;' />"
 s = s + "<img src='" + GetFileURL("celebrate.png") + "' style=\"position:absolute;' />"
 s = s + "</div>"
 msg (s)

The first image displays but not the second one.

I can get the effect I'm looking for by doubling up on the div tags.

url1 = GetFileURL("img/gal01.png")
url2 = GetFileURL("img/gal02.png")
s = "<div style='position:fixed; left: 0px; bottom: -10%; width: 512px; height: 1024px;'>"
s = s + "<img src='" + url1 + "' style=\"position:absolute; top:0px; width:90%;'/>"
s = s + "<img src='" + url2 + "' style=\"position:absolute; top:0px; width:90%;'/>"
s = s + "</div>"
msg (s)
s = "<div style='position:fixed; left: 0px; bottom: -10%; width: 512px; height: 1024px;'>"
s = s + "<img src='" + url2 + "' style=\"position:absolute; top:0px; width:90%;'/>"
s = s + "<img src='" + url1 + "' style=\"position:absolute; top:0px; width:90%;'/>"
s = s + "</div>"
msg (s)

I'll keep futzing but I think something has to be fixed in how the browser renders perhaps.

The images don't work individually at all in the div. They have to have the second one in the div, even though it doesn't show up, otherwise neither show up.

Hmm… somebody's being weird with quotes.
This code:

 s = "<div style='position:fixed; left: 0px; bottom: 20px; width: 260 px; height: 670px;'>"
 s = s + "<img src='" + GetFileURL("gravestone.png") + "' style=\"position:absolute;top:0px;left:-200px;' />"
 s = s + "<img src='" + GetFileURL("celebrate.png") + "' style=\"position:absolute;' />"
 s = s + "</div>"
 msg (s)

generates this HTML:

 <div style='position:fixed; left: 0px; bottom: 20px; width: 260 px; height: 670px;'><img src='somedomain/comepath/gravestone.png' style="position:absolute;top:0px;left:-200px;' /><img src='somedomain.somepath/celebrate.png' style="position:absolute;' /></div>

OK, what have we got here?

• A div element
  • With a style atttribute whose value is position:fixed; left: 0px; bottom: 20px; width: 260 px; height: 670px;
  • Containing an img element
    • with a src element whose value is somedomain/comepath/gravestone.png
    • and a style attribute whose value is position:absolute;top:0px;left:-200px;' /><img src='somedomain.somepath/celebrate.png' style=
    • and some junk at the end (position:absolute;') which the browser ignores because it can't be parsed as name="value" pairs

I suspect that the img lines should be of the form:

s = s + "<img src=\"" + variable containing the URI + "\" style=\"style information goes here\" />"

You can use single quotes (') instead of escaped double quotes (\"), but you shouldn't attempt to mix and match them in the same attribute. Some browsers may try to figure out what they mean, but how they do this isn't going to be reliable.

That's what I get for copying the example. The escaped dubs work, of course.

Also, it's going to be a problem with most JavaScript examples. URLs get " " and their elements get ' '... makes it look nice with CSS/HTML.