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

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

Logo

The DHTML Lab Jigsaw Puzzle, Part I: IE4
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">
<!--
    #elPuzzle {
        position: absolute;
        left:0; top:0;
        width: 100;
        border: 3px black solid;
        visibility: hidden;
    }
    #elControls {
        position: relative;
        background-color: #EEEEEE;
        text-align: center;
        border-top: 1px red solid;
        padding: 5px;
        height: 40;
    }
    #elGrid {
        position: absolute;
        left: 0; top: 0;
        visibility: hidden;
    }
    .clPuzzPiece {
        position: absolute;
        visibility: hidden;
    }
    .clFormLabels {
        font: bold 8pt sans-serif;
    }
-->
</STYLE>
<SCRIPT LANGUAGE="JScript" SRC="puzzExt.js"></SCRIPT>
<SCRIPT LANGUAGE="JScript" SRC="puzzDrag.js"></SCRIPT>
</HEAD>

The HTML

<BODY onLoad="whenLoaded()">
.
.
.
<DIV ID="elPuzzle">
    <IMG NAME="imOrig" ID="elImOrig" SRC="hands.jpg"> onLoad="whenLoaded()"
    <DIV ID="elGrid">
        <IMG NAME="imGrid" ID="elImGrid" SRC="grid.gif" onLoad="whenLoaded()">
    </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>
.
.
.
</BODY>

Go on to the main puzzle script.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 11/05/97
Revised: 11/05/97

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