DHTML Jigsaw Puzzle: Cross-Browser; The Complete Code (CSS/HTML)

The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
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 and Scripts

<HTML>
<HEAD>
<TITLE>The Dynamic HTML Lab Jigsaw Puzzle</TITLE>
<STYLE TYPE="text/css">
<!--
    #elPuzzle {
        position: absolute;
        left:0; top:0;
        layer-background-color: black;
        background-color: black;
        visibility: hidden;
    }
    
    #elControls {
        position: absolute;
        background-color: #EEEEEE;
        layer-background-color: #EEEEEE;
        left: 3; top: 0;
        padding: 5;
    }
	
    #elImage {
        position: absolute;
        left: 3; top: 3;
    }
    
    #elBlank {
        position: absolute;
        layer-background-color: white; 
        background-color: white;
        left: 3; top: 3;
        visibility: hidden;
    }
    
    #elGrid {
        position: absolute;
        left: 3; top: 3;
        visibility: hidden;
    }
   
    .clPuzzPiece {
        position: absolute;
        visibility: hidden;
    }
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
    NS4 = (document.layers) ? 1 : 0;
    isMac = (navigator.appVersion.indexOf("Mac")!=-1) ? 1 : 0;
    IE4 = ((document.all) && (!isMac)) ? 1 : 0;
    ver4 = (NS4 || IE4) ? 1 : 0;
	       // remember, IE4MAC does not support clip property
    if (ver4) {
        document.write("<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzExt.js"><\/SCRIPT>");
        document.write("<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzDrag.js"><\/SCRIPT>");
    }
</SCRIPT>

The HTML

<BODY onLoad="whenLoaded()">
.
.
.
<DIV ID="elPuzzle">
    <DIV ID="elImage"><IMG NAME="imOrig" ID="elImOrig" SRC="skiff.jpg" onLoad="whenLoaded()"></DIV>
    <DIV ID="elBlank"></DIV>
    <DIV ID="elGrid"><IMG NAME="imGrid" ID="elImGrid" SRC="grid.gif" onLoad="whenLoaded()"></DIV>
    <DIV ID="elControls">
        <FORM NAME="fmControls"><NOBR>
            <INPUT TYPE=BUTTON onClick="preSolve(true)" STYLE="cursor:hand" VALUE="Solve">
            <INPUT TYPE=BUTTON onClick="preSolve(false)" STYLE="cursor:hand" VALUE= "Hint">
            <INPUT TYPE=BUTTON onClick="breakUp()" STYLE="cursor:hand" VALUE="Break">
            </NOBR><BR><NOBR>
            <SPACER TYPE=VERTICAL SIZE=5>
            <INPUT NAME="gridBut" TYPE=BUTTON onClick="gridToggle()" STYLE="cursor:hand; font:5pt; position:relative; top:5" VALUE="Grid OFF">
            &nbsp;<INPUT NAME="dragBut" TYPE=BUTTON onClick="dragToggle()" STYLE="cursor:hand; font:5pt; position:relative; top:5" 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>&ampnbsp;
            <B STYLE="font:bold 9pt sans-serif;">Puzzle:</B>
            <SELECT onChange="initPuzz(options[selectedIndex].value);">
                <OPTION VALUE="balloon.jpg">Balloon
                <OPTION VALUE="halfmoon.jpg">HalfMoon
                <OPTION VALUE="island.jpg">Island
                <OPTION VALUE="prometheus.jpg">Prometheus
                <OPTION VALUE="skiff.jpg" SELECTED>Skiff
                <OPTION VALUE="storm.jpg">Storm
                <OPTION VALUE="sunset.jpg">Sunset
            </SELECT>
            </NOBR>
        </FORM>
    </DIV>
</DIV>
.
.
.
</BODY>