DHTML Jigsaw Puzzle: NN4; The HTML placement
The DHTML Lab Jigsaw Puzzle, Part III: NN4
placing the puzzle on the page
Ordering the Elements
When writing the HTML for including the NN puzzle in your page, take care to place the nested elements in the correct order. Their order in the HTML sets their z-order as well. If you've noticed, we have not declared a z-order for any element. The order in "z space" is accomplished solely through the correct ordering of the elements in the HTML page. For example, elBlank should be after elImage, so if made visible it can hide elImage. The grid element must be after elBlank so the grid will appear on the white background, and so on.
<BODY onLoad="whenLoaded()"> . . . <DIV ID="elPuzzle"> <DIV ID="elImage"> <IMG NAME="imOrig" SRC="selfPort.jpg" onLoad="whenLoaded()"> </DIV> <DIV ID="elBlank"> </DIV> <DIV ID="elGrid"> <IMG NAME="imGrid" SRC="grid.gif" onLoad="whenLoaded()"> </DIV> <DIV ID="elControls"> <FORM NAME="fmControls"> <NOBR> <INPUT TYPE=BUTTON onClick="solve(true)" VALUE="Solve"> <INPUT TYPE=BUTTON onClick="giveHint()" VALUE="Hint"> <INPUT TYPE=BUTTON onClick="breakUp()" VALUE="Break"> </NOBR> <BR> <NOBR> <SPACER TYPE=VERTICAL SIZE=5> <INPUT NAME="gridBut" TYPE=BUTTON onClick="gridToggle()" VALUE="Grid OFF"> <INPUT NAME="dragBut" TYPE=BUTTON onClick="dragToggle()" VALUE="Drag ON"> </NOBR> <BR><BR> <NOBR> <B STYLE="font:bold 9pt sans-serif;">Across:</B> <SELECT 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 STYLE="font:bold 9pt sans-serif;">Down:</B> <SELECT 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> <BR> <NOBR> <B STYLE="font:bold 9pt sans-serif;">Puzzle:</B> <SELECT onChange="initPuzz(options[selectedIndex].value);"> <OPTION VALUE="selfPort.jpg">Self Portrait <OPTION VALUE="girlMirror.jpg">Girl and Mirror <OPTION VALUE="redBull.jpg">Red Bull <OPTION VALUE="lemon.jpg">Lemon <OPTION VALUE="piano.jpg">Piano <OPTION VALUE="guitar1.jpg">Guitar 1 <OPTION VALUE="guitar2.jpg">Guitar 2 <OPTION VALUE="skull.jpg">Skull <OPTION VALUE="harlequin.jpg">Harlequin <OPTION VALUE="paintMod.jpg">Modern Painting <OPTION VALUE="guernica.jpg">Guernica </SELECT> </NOBR> </FORM> </DIV> </DIV>
The NN-specific Additions
We've included our elements in the correct order, but one change from the IE version is the enclosure of the form elements in a <FORM>. Navigator requires form elements (INPUT, SELECT, etc.) to be nested in a FORM. They can only be accessed through reference to the FORM, so we have to give it a NAME, in this case, fmControls.
Navigator 3 introduced a little-used proprietary tag, <SPACER>. A useful tag, it has since been superceded by CSS properties. We cannot provide CSS positioning on form elements in NN4, so we move our buttons down on our page five pixels with SPACER. SPACER has the following syntax:
TYPE = "HORIZONTAL"|"VERTICAL"|"BLOCK"
ALIGN = "LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"|
HEIGHT = height
WIDTH = width
SIZE = size
If the TYPE attribute has a VERTICAL or HORIZONTAL value, a second attribute, SIZE, is required. SIZE can have any positive integer value representing the pixel value of space you want to add to your page. If TYPE is a BLOCK, then ALIGN, HEIGHT and WIDTH are used. These attributes work exactly like their namesakes in the IMG tag. In fact, the best way to envision the results they produce when used with SPACER, is to imagine an invisible image placed on your page.
The style for our pull-down menu one-word descriptions is placed in-line, in full. If we used the CLASS= attribute, it would not display the same across browsers, and remember we are trying to ultimately create a cross-browser version.
Finally, the onChange handler of our final SELECT element calls the initPuzz() function, passing the value of the selected OPTION as an argument. In our case it is the src of the image we want to load.
As before, we have three onLoad event handlers firing. Two fire when images load, that is, our grid and our puzzle image. And the third when the document has loaded. With these three loaded, we can initialize the puzzle.
Produced by Peter Belesis andAll Rights Reserved. Legal Notices.
Created: Nov. 27, 1997
Revised: Jan. 18, 1998