| home / experts / dhtml / column8 |   
|
|
The two script groupings required have been included here as external files. They could just as easily be inserted into the page proper.
<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>
<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: 11/05/97
Revised: 11/05/97
URL: http://www.webreference.com/dhtml/column8/allCode1.html
