All our buttons have been given an ID and an onClick event handler to call a function when the button is clicked. The function names are self-explanatory and we will be discussing them in detail later. Notice only that the solve() function takes a Boolean argument. In this case, it is true. The buttons could have been created with IE4's BUTTON tag, as in column 5, but INPUT is used for cross-browser purposes. The above code gives us this display:

Explorer allows us to add style characteristics to any element including INPUTs, so let's improve these buttons. First, to signal to the user that the buttons are clickable, we set the cursor property to hand. A full discussion of the cursor property can be found in column 7. The buttons in the second row should be positioned a little further down, so we give them a position property set to relative and move them down 5 pixels. And since these are not-so-important supplementary buttons, we make them smaller by changing their font size:

Every SELECT menu has an onChange event handler to evaluate expressions or call a function. We will see the importance of these later. The two menus for selecting the number of puzzle pieces across and down have a default selection of 5. This can be changed to any option you prefer. The last drop-down menu holds the URLS of the images available for puzzle creation in the VALUE attribute and a short description for the user. Images can be added or omitted by simply changing this listing.

We can add a minimal amount of formatting to this part of our controls. We'd like our headings to be smaller and in a sans-serif font, and we don't want our headings to be separated from their respective menus. The first effect, we achieve by creating a CSS class and applying it to our headings. The second needs only the <NOBR> tag. Go back to the stylesheet and declare the class: