DHTML Jigsaw Puzzle: NN4; The HTML placement | WebReference

DHTML Jigsaw Puzzle: NN4; The HTML placement

Logo

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;"&gt;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:

    <SPACER 
   TYPE = "HORIZONTAL"|"VERTICAL"|"BLOCK"
  ALIGN = "LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"|
          "TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM"
 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 and

 
All Rights Reserved. Legal Notices.

Created: Nov. 27, 1997

Revised: Jan. 18, 1998

URL: 
https://www.webreference.com/dhtml/column10/puzzNShtml.html