The DHTML Lab Jigsaw Puzzle, Part I: IE4
Building the puzzle controls
The Controls
The controls are, of course, composed of the form elements INPUT and SELECT. We need five buttons and three select lists. The bare HTML for the buttons is:
<INPUT ID="solvBut" TYPE=BUTTON onClick="" VALUE="Solve">
<INPUT ID="hintBut" TYPE=BUTTON onClick="return" VALUE= "Hint">
<INPUT ID="brkBut" TYPE=BUTTON VALUE="Break">
<BR>
<INPUT ID="gridBut" TYPE=BUTTON onClick="gridToggle()" VALUE="Grid OFF">
<INPUT ID="dragBut" TYPE=BUTTON onClick="dragToggle()" VALUE="Drag ON">
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:
<INPUT ID="solvBut" TYPE=BUTTON onClick="solve(true)"
STYLE="cursor:hand" VALUE="Solve">
<INPUT ID="hintBut" TYPE=BUTTON onClick="giveHint()"
STYLE="cursor:hand" VALUE= "Hint">
<INPUT ID="brkBut" TYPE=BUTTON onClick="breakUp()"
STYLE="cursor:hand" VALUE="Break">
<BR>
<INPUT ID="gridBut" TYPE=BUTTON onClick="gridToggle()"
STYLE="cursor:hand; font:5pt; position:relative; top:5" VALUE="Grid OFF">
<INPUT ID="dragBut" TYPE=BUTTON onClick="dragToggle()"
STYLE="cursor:hand; font:5pt; position:relative; top:5" VALUE="Drag ON">
Our buttons now look like this:
Next, we create the SELECT menus. Everything you always wanted to know about SELECT menus and OPTIONs can be found in the WebReference article "Universal Related Popup Menus" by Andrew King.
<B>Across:</B>
<SELECT ID="selAcross"
onChange="puzzAcross = options[selectedIndex].value;
isNewPuzz=true;
isCreated=false;">
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5 SELECTED>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
</SELECT>
<B>Down:</B>
<SELECT ID="selDown"
onChange="puzzDown = options[selectedIndex].value;
isNewPuzz=true;
isCreated=false;">
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5 SELECTED>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
</SELECT>
<B>Puzzle:</B>
<SELECT ID="selPic"
onChange="document.images["imOrig"].src = options[selectedIndex].value;
initPuzz();">
<OPTION VALUE="hands.jpg">Hands
<OPTION VALUE="reptiles.jpg">Reptiles
<OPTION VALUE="3worlds.jpg">3Worlds
<OPTION VALUE="birdsfish.gif">Birds/Fish
<OPTION VALUE="treereflec.jpg">Tree Reflection
</SELECT>
The above HTML creates these SELECT elements:
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:
.clFormLabels {
font: bold 8pt sans-serif;
}
Add the appropriate HTML attributes and tags:
<NOBR>
<B CLASS=clFormLabels>Across:</B>
<SELECT ID="selAcross"
.
.
.
</SELECT>
</NOBR>
<NOBR>
<B CLASS=clFormLabels>Down:</B>
<SELECT ID="selDown"
.
.
.
</SELECT>
</NOBR>
<NOBR>
<B CLASS=clFormLabels>Puzzle:</B>"
<SELECT ID="selPic"
.
.
.
</SELECT>
</NOBR>
The above gives us this result:
Finally, let's put all the HTML together:
<DIV ID="elPuzzle">
<IMG NAME="imOrig" ID="elImOrig" SRC="hands.jpg">
<DIV ID="elGrid">
<IMG NAME="imGrid" ID="elImGrid" SRC="grid.gif">
</DIV>
<DIV ID="elControls">
<INPUT ID="solvBut" TYPE=BUTTON onClick="solve(true)"
STYLE="cursor:hand" VALUE="Solve">
<INPUT ID="hintBut" TYPE=BUTTON onClick="giveHint()"
STYLE="cursor:hand" VALUE= "Hint">
<INPUT ID="brkBut" TYPE=BUTTON onClick="breakUp()"
STYLE="cursor:hand" VALUE="Break">
<BR>
<INPUT ID="gridBut" TYPE=BUTTON onClick="gridToggle()"
STYLE="cursor:hand; font:5pt; position:relative; top:5"
VALUE="Grid OFF">
<INPUT ID="dragBut" TYPE=BUTTON onClick="dragToggle()"
STYLE="cursor:hand; font:5pt; position:relative; top:5"
VALUE="Drag ON">
<BR><BR>
<NOBR>
<B CLASS=clFormLabels>Across:</B>
<SELECT ID="selAcross"
onChange="puzzAcross = options[selectedIndex].value;
isNewPuzz=true;
isCreated=false;">
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5 SELECTED>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
</SELECT>
</NOBR>
<NOBR>
<B CLASS=clFormLabels>Down:</B>
<SELECT ID="selDown"
onChange="puzzDown = options[selectedIndex].value;
isNewPuzz=true;
isCreated=false;">
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5 SELECTED>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
</SELECT>
</NOBR>
<NOBR>
<B CLASS=clFormLabels>Puzzle:</B>"
<SELECT ID="selPic"
onChange="document.images["imOrig"].src = options[selectedIndex].value;
initPuzz();">
<OPTION VALUE="hands.jpg">Hands
<OPTION VALUE="reptiles.jpg">Reptiles
<OPTION VALUE="3worlds.jpg">3Worlds
<OPTION VALUE="birdsfish.gif">Birds/Fish
<OPTION VALUE="treereflec.jpg">Tree Reflection
</SELECT>
</NOBR>
</DIV>
</DIV>
Ok, it doesn't look great, but don't forget it is still invisible to the user. As soon as we start scripting, it will all fall into place.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: Nov. 5, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column8/puzzHTML2.html
