| home / experts / dhtml / column9 |   
|
|
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.
<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>
<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
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Nov. 13, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column9/allCode1.html
