Picture Map in UI

Hello 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.


Nevermind, 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');")


I 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?


You 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.


I thought I had tried that, but I must have done the syntax incorrectly. Worked like a charm, thanks so much!


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums