Picture Map in UI

Kaejer
12 Jun 2020, 07:48Hello everyone, happy questing :D.
Summary of what I am trying to do: Use an image as a local map in the UI so there it doesn't take up text room.
I've been referencing the below topic that seems to be covering this mostly, but I'm having some issues with it.
http://textadventures.co.uk/forum/samples/topic/q5zedoe560au_ii73oamoq/adding-graphics-in-a-specific-location-gui-solved
I currently have this in my "Before entering the room" section of the first room a player enters in my adventure:
msg ("<img id='pane-pic1' style='display:none;' src='quest://local/beach01.jpg' />")
JS.eval ("$('#pane-pic1').insertBefore($('#compassLabel')).show().width('100%');")
Then in future rooms to change I am attempting to use this code in the "Before entering the room" section:
JS.eval ("$('#pane-pic1').attr('src', 'quest://local/beach02.jpg');")
It does not seem to change, go away, or anything. The image from the first room appears to be stuck permanently. Is there something I am missing to be able to change this? Maybe an easier way such as displaying the image in another UI box?
Thanks in advance for any assistance you can provide.

Kaejer
12 Jun 2020, 08:09Nevermind, it works fine as long as I don't make a dumb typo. Don't try to debug when exhausted.
The second part was actually the below so it was doing nothing.
JS JS.eval ("$('#pane-pic1').attr('src', 'quest://local/beach02.jpg');")

Kaejer
12 Jun 2020, 08:13I guess there is a follow-up question though. The images I am using for the map are local to the folder where the .aslx file is located so it works for local play, but online play cannot pull the image. Does this mean all of my images will need to be hosted online somewhere instead of pulling from the output file? Or is there a way to use images within the output file?
mrangel
12 Jun 2020, 10:59You need to use the Quest function GetFileURL
to get the URI of the file.
So that would be:
msg ("<img id='pane-pic1' style='display:none;' src='" + GetFileURL("beach01.jpg") + "' />")
JS.eval ("$('#pane-pic1').insertBefore($('#compassLabel')).show().width('100%');")
and
JS.eval ("$('#pane-pic1').attr('src', '" + GetFileURL("beach02.jpg") + "');")
for your two examples.

Kaejer
12 Jun 2020, 17:18I thought I had tried that, but I must have done the syntax incorrectly. Worked like a charm, thanks so much!