DHTML Jigsaw Puzzle: NN4; The Complete Code (CSS/HTML) | WebReference

DHTML Jigsaw Puzzle: NN4; The Complete Code (CSS/HTML)

Logo

The DHTML Lab Jigsaw Puzzle, Part III: NN4
SPECIAL EDITION; the director's cut 1/3


Comments

The two script groupings required have been included here as external files. They could just as easily be inserted into the page proper.

The Style Sheet

<HTML>
<HEAD>
<TITLE>The Dynamic HTML Lab Jigsaw Puzzle</TITLE>
<STYLE TYPE="text/css">
&lt!--
    #elPuzzle {
        position: absolute;
        left: 0; top: 0;
        background-color: black;
        layer-background-color: black;
        visibility: hidden;
    }
    #elImage {
        position: absolute;
        left: 3; top: 3;
    }
    #elBlank {
        position: absolute;
        background-color: white;
        layer-background-color: white;
        left: 3; top: 3;
        visibility: hidden;
    }
    #elGrid {
        position: absolute;
        left: 3; top: 3;
        visibility: hidden;
    }
    #elControls {
        position: absolute;
        background-color: #EEEEEE;
        layer-background-color: #EEEEEE;
        left: 3; top: 0;
        padding: 5;
    }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzExt.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzDrag.js"></SCRIPT>
</HEAD>

The HTML

<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);"</BODY>

Go on to the main Navigator puzzle script.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov. 27, 1997
Revised: Jan. 18, 1998

URL: http://www.webreference.com/dhtml/column10/allCode1.html