Button Workshop output is described in the Output topic. Here, we will discuss what you may want to do to integrate the resulting files into your Web site. We will assume that your are familiar with HTML and JavaScript programming fundamentals.

 

The HTML output produced by Button Workshop is structured roughly as follows. Global Background and all buttons are placed into a single main HTML table. There may be other HTML tables within that main table, but the main point to remember is that there is always a single main table with everything visible placed inside it.

 

Beyond that, there's some JavaScript to support dynamic buttons. All images that correspond to various button states are stored in an array of BtnRecord structures. Five event handlers ensure that images are swapped according to the position and state of the mouse. The UpdateStates() function is meant to be executed at page initialization time (i.e., in OnLoad) to initialize buttons in Disabled or Downed states, if any.

 

Each BtnRecord structure contains, aside from state images, 3 Boolean fields: Downable, Downed, and Enabled.

•Downable corresponds to the Downable (Sticky) checkbox, and is set by default to match the state of the latter.
•Downed tracks the "toggled" state of the button, and it always defaults to false.
•Enabled tracks each button's Enabled/Disabled state, and is initially set according to the state the button had in the Preview panel.

 

To place a particular button in the state of your choosing at the time your Web page loads, you would need to change the corresponding BtnRecord structure members accordingly. You could obviously do so directly in the JavaScript code produced by Button Workshop, or by writing a few lines of JavaScript to override the default states as necessary. For example, to disable the 4th button, you'd write something like:

<script language="JavaScript" type="text/JavaScript">

<!--

BtnRecArray[4].Enabled = false;

//-->

</script>

 

The HTML files produced by Button Workshop invoke the UpdateStates() function using the following JavaScript statement:

document.onload = UpdateStates;

As an alternative, you could change your <BODY> tag to:

<BODY onLoad="UpdateStates()">

 

The basic steps to integrate Button Workshop's HTML output into existing HTML pages therefore are:

1.Copy the main HTML table described in the 2nd paragraph wherever you want it to appear in your page.
2.Copy the JavaScript code into your page (or make it available to your page as an external JavaScript file).
3.Optionally, modify button states as necessary.
4.Ensure UpdateStates() is called from OnLoad (especially if you have any Downed or Disabled buttons).

 

 

Note that UpdateStates() does not re-enable buttons once they become disabled since such functionality is not likely to be useful.