[RESOLVED] Displaying image (in code)

OurJud
12 Jan 2016, 18:09
[solved] thanks to this thread: viewtopic.php?f=10&t=5858&p=40558#p40558
----------------------
I'm trying to get a small image to display within the command box of my game.

I created the image, added it to a room called PROPS using the 'Show image' script (in order to get the image url) and then added it to my input#txtCommand in my game's CSS block:

input#txtCommand {
background: url ('parser.jpg');
outline:none;
border: none;
font-size:13px;
margin:0;
padding:0;
max-width: 1000px;

}

But it didn't work.

jaynabonne
12 Jan 2016, 19:41
You need to use GetFileURL to get the actual URL. What you've done would work in normal HTML, but it doesn't work in Quest.

What you can do is first define your CSS like this:

input#txtCommand {
background: url (BACKGROUND_IMAGE);
outline:none;
border: none;
font-size:13px;
margin:0;
padding:0;
max-width: 1000px;

}

and then in your game start script, do:

game.css = Replace(game.css, "BACKGROUND_IMAGE", GetFileURL("parser.jpg"))

That sets a placeholder for the final image name, which you then substitute in with the real URL.

OurJud
12 Jan 2016, 19:48
Thank you. Unfortunately it's not working. I've also tried it with a new game file, just in case all the code I use to hide the command box was hiding the image too, but it didn't work in fresh game file either.

When you say 'substitute with the real URL' are you saying the real URL is not 'parser.jpg' ?

You can also define text in CSS with 'content', so I've also tried:

input#txtCommand {
outline:none;
border: none;
font-size:13px;
margin:0;
padding:0;
max-width: 1000px;
content: ">"

}

But not even that worked.

jaynabonne
12 Jan 2016, 20:29
It's possible that that part is now ok, but something else is amiss. One thing that might be useful would be to go into the HTML Tools and find the text input and see if the CSS's background has a reasonable URL.

OurJud
12 Jan 2016, 20:37
Sorry, I've no idea how to do what you're asking. I hit play in my game then HTML tools, but then what? I'm used to firebug for looking at elements, and this HTML tool makes no sense to me.

All I could find was:

<div id="txtCommandDiv" style="display: block;">&gt;&nbsp;
<input type="text" x-webkit-speech="" id="txtCommand" onkeydown="return commandKey(event);" placeholder="" autofocus="" style="font-family: 'Special Elite', 'Lucida Console', Monaco, monospace; color: rgb(211, 211, 211); font-size: 13pt; width: 1000px; background: black;">
<a id="endWaitLink" onclick="endWait();" class="cmdlink" style="display: none">Continue...</a>
</div>

When I highlight this code, the CSS in the right pane shows a strikethrough for 'background: url(BACKGROUND_IMAGE); if that's at all relevant.

jaynabonne
12 Jan 2016, 20:43
You're right there. :) If you click on that div, it should show you the css in the right pane.

OurJud
12 Jan 2016, 20:48
See edited last post - I just beat you to it :)