That looks good, I can’t see anything wrong with it.
Dannii;
I’ve tried everything to get your example to work.
I’m starting to think it’s a Mac thing.
I’ve tried other image button examples online and they don’t work either.
Can you put it online somewhere for us to look at?
Thanks, Dannii.
I had a very tough and draining meeting this evening, so I didn’t have time to put together everything as a “package”. (i.e. .inf, js, and css)
I will try to do that tomorrow, if possible. You’ve passed me code as attachments. Is that something I can do or is that limited in its availability?
I could also put the package on dropbox for you to download and just post a link. Would that be better?
By the way; I’ve used Firebug to examine the code and can now see that both the js and css files have been loaded.
The js file does work and the html does get injected, but the css file seems to have no effect on the appearance of the injected code.
In some of the books, they note that certain platforms require the css file to have extra statements to make them work as intended.
That is why I wondered if it might be a Mac thing.
A dropbox link would be best I think… I think it will even just display it as a html page so no downloads needed.
I finally got it to work! Thanks for your support and suggestions.
It’s definitely not optimized, but it works and I get output that I can tweak.
(Posting seems to mess up the formatting, but I don’t think that will matter)
The three images are not included as one could use any small images for the three button states.
The next challenge is to inject a command back into Vorple via its public interface call to:
/**
* sendSilentCommand(), but the command is placed in the primary command
* queue. See also sendPrimaryCommand().
*
* @public
* @method
* @name parser#sendSilentPrimaryCommand
*/
That’s a separate issue and I’ll post it as a separate topic.
Regards;
Gary
Here is the CSS:
[code]a.button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:url(Button.jpg) no-repeat right;
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:20px;
font-weight:bold;
padding-left:1%;
padding-right:1%;
padding-top:1%;
padding-bottom:1%;
height:20px;
width:125px;
text-decoration:none;
text-align: left;
text-shadow:0px 1px 0px #ffffff;
}
a.button:hover {
background:url(Button-off.jpg) no-repeat right;
background-color:#dfdfdf;
}
a.button:active {
background:url(Button-on.jpg) no-repeat right;
position:relative;
top:1px;
}
a.button:focus {
background:url(Button-off.jpg);
}
[/code]
Here is the javascript:
[code]function insertButtonCode()
{
var newA = $(’<a class = “button” href: “#”>E’);
$(".buttonCode").append(newA);
};
function removeButtonCode() {
$(’.buttonCode’).remove();
};
[/code]
Here is the Inform7 “test harness” code:
[code]“Buttons4” by Gary
Include Vorple by Juhana Leinonen.
Release along with the “Vorple” interpreter.
[Make sure the new JS and CSS files are available to load]
Release along with JavaScript “Button.js”.
Release along with style sheet “Button.css”.
[Make sure the graphics are available to the CSS file.]
Release along with a file of “Button” called “Button.jpg”.
Release along with a file of “Button-off” called “Button-off.jpg”.
Release along with a file of “Button-on” called “Button-on.jpg”.
[
Create a new command to ‘place’ a button.]
Placing a button is an action out of world.
Understand “place” as Placing a button.
Carry out placing a button (this is the carry out placing a button rule):
if Vorple is available:
execute JavaScript command “removeButtonCode()”; [Erase any previous button(s)]
open HTML tag “div” called “buttonCode”; [Start the tag to contain the button]
say "This is a button: "; [‘Introduce the button’]
close HTML tag; [End the tag to contain the button]
execute JavaScript command “insertButtonCode()”; [Place the button]
mark the current action “normal”; [Make sure it appears in the turn area]
otherwise:
say “[bold type]Buttons are not possible without VORPLE[roman type]”;
[Create a new command to ‘erase’ a button.]
Erasing a button is an action out of world.
Understand “erase” as erasing a button.
Carry out erasing a button (this is the carry out erasing a button rule):
if Vorple is available:
execute JavaScript command “removeButtonCode()”; [Erase any previous button(s)]
otherwise:
say “[bold type]Buttons are not possible without VORPLE[roman type]”.
Example Location is a room.
[/code]