| home / experts / dhtml / column10 |   
|
|
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;
background-color: black;
layer-background-color: black;
visibility: hidden;
}
#elImage {
position: absolute;
left: 3; top: 3;
}
#elBlank {
position: absolute;
background-color: white;
layer-background-color: white;
left: 3; top: 3;
visibility: hidden;
}
#elGrid {
position: absolute;
left: 3; top: 3;
visibility: hidden;
}
#elControls {
position: absolute;
background-color: #EEEEEE;
layer-background-color: #EEEEEE;
left: 3; top: 0;
padding: 5;
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzExt.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="puzzDrag.js"></SCRIPT>
</HEAD>
<BODY onLoad="whenLoaded()">
.
.
.
<DIV ID="elPuzzle">
<DIV ID="elImage">
<IMG NAME="imOrig" SRC="selfPort.jpg" onLoad="whenLoaded()">
</DIV>
<DIV ID="elBlank">
</DIV>
<DIV ID="elGrid">
<IMG NAME="imGrid" SRC="grid.gif" onLoad="whenLoaded()">
</DIV>
<DIV ID="elControls">
<FORM NAME="fmControls">
<NOBR>
<INPUT TYPE=BUTTON onClick="solve(true)" VALUE="Solve">
<INPUT TYPE=BUTTON onClick="giveHint()" VALUE="Hint">
<INPUT TYPE=BUTTON onClick="breakUp()" VALUE="Break">
</NOBR>
<BR>
<NOBR>
<SPACER TYPE=VERTICAL SIZE=5>
<INPUT NAME="gridBut" TYPE=BUTTON
onClick="gridToggle()" VALUE="Grid OFF">
<INPUT NAME="dragBut" TYPE=BUTTON
onClick="dragToggle()" 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>
<B STYLE="font:bold 9pt sans-serif;">Puzzle:</B>
<SELECT onChange="initPuzz(options[selectedIndex].value);"<>
<OPTION VALUE="selfPort.jpg">Self Portrait
<OPTION VALUE="girlMirror.jpg">Girl and Mirror
<OPTION VALUE="redBull.jpg">Red Bull
<OPTION VALUE="lemon.jpg">Lemon
<OPTION VALUE="piano.jpg">Piano
<OPTION VALUE="guitar1.jpg">Guitar 1
<OPTION VALUE="guitar2.jpg">Guitar 2
<OPTION VALUE="skull.jpg">Skull
<OPTION VALUE="harlequin.jpg">Harlequin
<OPTION VALUE="paintMod.jpg">Modern Painting
<OPTION VALUE="guernica.jpg">Guernica
</SELECT>
</NOBR>
</FORM>
</DIV>
</DIV>
.
.
.
</BODY>
Go on to the main Navigator 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. 27, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column10/allCode1.html
