Here I go again..

I was thinking "Wouldn't it be nice to have a menu at the top of the screen (or wherever) . A small one, semi wide but not super high, with pictures in it where the player could click (example) the picture with a question mark to get to the help page, the note to turn off/on music, the something else to turn off/on sound FX, etc etc."

How difficult would that be on a scale from 1 to 10000000000?

Found this by Jay
http://textadventures.co.uk/forum/samples/topic/4681/command-link-bottom-bar

... if I could figure out how to replace the text with pictures this should work out nicely!

Jay's code doesn't like it when I try to use images in place of the words...

Do you specifically want the style Jay used?

Have you considered buttons? (You could use an image as a button's background.)

Quest has this included, too (scroll down to Framework Icons):
http://jqueryui.com/themeroller/

msg("<button id='help-btn' class='ui-icon ui-state-default ui-icon ui-icon-help' style='display:none;padding:4px;' onclick=\"ASLEvent('HandleSingleCommand','help');\"></button>")
JS.eval("$('#help-btn').insertAfter($('#txtCommandDiv')).show()")

No, that was just the only thing I found I could wrap my head around.
I guess buttons could work, still haven't tried it but I will soon. Just need to sort out a flag mishap first!
Thanks!

(btw, should that go into "before enter room" or somewhere else?)

Depends on when you want the buttons to appear (or change). If they are always the same, use the "User Interface Initialisation" script, which will load the JS stuff when loading a new game AND a saved game.

Been playing around with the button images that come with jQuery UI (which comes with Quest), and I've got this (which doesn't look good, but I focus on functionality before cosmetics):

msg("<audio src=\"http://media.textadventures.co.uk/games/1RurGHLuLUqrWdMJh53LTQ/bushcave-explicit-r9/sounds/bushcave.ogg\" autoplay />")
msg ("<div id='extra-buttons'><button id='help-btn' class='ui-icon ui-state-default ui-icon-help' onclick=\"ASLEvent('HandleSingleCommand','help');\"></button><button id='volume-btn' class='ui-icon ui-icon-volume-off ui-state-default'  onclick=\"if($(this).hasClass('ui-icon-volume-off')){$(this).addClass('ui-icon-volume-on').removeClass('ui-icon-volume-off');$('audio,video').each(function(){this.muted=true;});}else{$(this).addClass('ui-icon-volume-off').removeClass('ui-icon-volume-on');$('audio,video').each(function(){this.muted=false;});}\"></button></div>")
JS.eval ("$('#extra-buttons').insertAfter($('#txtCommandDiv')).show();")

I don't know why those buttons won't print on one line. It's driving me insane. I know it's something in the class settings, but it's kicking by butt!

Worry not, though, Cheese. For I shall not go gently into that good night! Rage! RAGE AGAINST THE MACHINE!!!

I actually forgot I asked this question and was about to do it again.
Now that I've started writing the music for the game this thread is on the table again.
I need to sort this out. Tomorrow.
I'll check your code then too K.V.! Thanks man!

On a related note, has anyone been successful at adding images for buttons in the Custom Command Pane? Or CLICKABLE buttons? I have tried to do both without success; I can only add non-clickable buttons without images. The custom command pane seems limited in how much you can alter it.

You could create your own command pane, however, in the same way that KV created a second picture pane:
http://textadventures.co.uk/forum/samples/topic/q5zedoe560au_ii73oamoq/adding-graphics-in-a-specific-location-gui-solved
You could then add all the clickable images/buttons to it that you wanted, but it would be a major task to code it all.

In a similar vein, The Pix created additional custom status panes which could be used as a command pane:
http://textadventures.co.uk/forum/quest/topic/6hjbgvutlkgulv_wjkc-dq/more-than-one-custom-status-panes

Dcoder,

In the "User Interface Initialisation" script:

JS.setCommands ("Dcoder")
// The id will be 'verblink' + your word in lower case
JS.eval("$('#verblinkdcoder').html(\"<img src='https://i.imgur.com/d9UrZ6lb.jpg'/>\");")

It will still send the word you initially set up as the command.

So, this would actually cause the player to jump when you click my image:

JS.setCommands ("jump")
// The id will be 'verblink' + your word in lower case
JS.eval ("$('#verblinkjump').html(\"<img src='https://i.imgur.com/mBf7TBeb.png'/>\");")

It replaces spaces with underscores, too. So 'Sit down' would be like this:

JS.setCommands ("Sit down")
// The id will be 'verblink' + your word in lower case
JS.eval ("$('#verblinksit_down').html(\"<img src='https://i.imgur.com/mBf7TBeb.png'/>\");")

To use a local image:

JS.setCommands ("Help")
// The id will be 'verblink' + your word in lower case
img = GetFileURL("b_help.png") // Image from Quest's source code
JS.eval ("$('#verblinkhelp').html(\"<img src='"+img+"' title='Ask for help!'/>\");")

Awesome KV! I thought I tried this already, but somehow couldn't get it to work. You da man!

Next question: How come it works when you do it, but not when I do it? : )

How come it works when you do it, but not when I do it?

Do you mean right now, or the first time you try?

Is it working for you?

Yes, it works now! I just meant I spent hours, previously, trying to make this work by trying out different combinations of code/syntax. I should have just asked you!

Oh, I gotcha. (Just checking!)

I've been in "Code Mode" for the past few days for some reason. (I probably won't even know how most of the stuff I've recently written works this time next week!)

I know what you mean by "code mode". When I'm so focused on code, I can't have regular conversations with other people. Social nuances get lost.