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

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

Logo

The DHTML Lab Jigsaw Puzzle, Part II: IE4 cont'd
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. Note that these files are read in conditionally, only if the browser is IE4 and not the Macintosh version. Recall that IE4, for the Macintosh, does not support the clip property, essential for the puzzle.

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="JavaScript">
<!--
    isMac = (navigator.appVersion.indexOf("Mac")!=-1) ? 1 : 0;
    IE4 = ((document.all) && (!isMac)) ? 1 : 0;
	       // remember, IE4MAC does not support clip property
    if (IE4) {
        document.write("<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzExt.js"><\/SCRIPT>");
        document.write("<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzDrag.js"><\/SCRIPT>");
    }
//-->
</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: Nov. 13, 1997
Revised: Jan. 18, 1998

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