Use this two important things to play puzzle games.

1.Download to your webpage directory (by clicking it, or clicking it with the "Shift" key depressed for NS):

- dynlayer.js
- mixup.js

2.Insert the following code where you wish the puzzle to appear on the page

<script language=javascript src=dynlayer.js></script>
<script language=javascript src=mixup.js></script>
<script>

/*
DHTML puzzle script (By Andrew Raharjo, andrahar_pgm03@yahoo.com, http://www.kristamitra.com/)
*/

//1) Specify whether puzzle should be rendered in NS 4.
// "0" disables it (for use when you wish to place the puzzle inside table)
var display_in_NS=1

//2) Configure second and third parameter below for puzzle image/size
//Make width and height divisible by 3
myPuz=new Puzzle('myPuz','http://dynamicdrive.com/dynamicindex14/photo2.jpg',141,255)

//3) Specify how many line breaks should appear after puzzle (for spacing purposes)
//Pertains only to NS
var linebreaks=14

writeCSS(myPuz.css)
if (document.layers) {
widthCheck = window.innerWidth
heightCheck = window.innerHeight
window.onResize = resizeFix}
function resizeFix() {
if (widthCheck != window.innerWidth || heightCheck != window.innerHeight)
document.location.href = document.location.href}
function DavInit(){
DynLayerInit()}
if (document.all||(document.layers&&display_in_NS==1))
window.onload=DavInit
</script>

<script>
if (document.all)
document.write(myPuz.div)
else if (document.layers&&display_in_NS==1){
document.write(myPuz.div)
for (spacer=0;spacer<=linebreaks;spacer++)
document.write('<br>')
}
</script>

Technical Notes (MUST READ)

Due to the complexity of this script, certain limitations exists in terms of configuration and displaying of it. Please read and follow ALL of the points below:

1) First and foremost, for Netscape's sake, this script must be placed outside any tables. That is why this page's layout is void of them, unlike all other pages on Dynamic Drive. The only workaround is to disable the puzzle in Netscape, which you can do by toggling a variable inside code of Step 2.

2) The script asks for the dimensions of the puzzle image. When you specify this information, adjust the numbers slightly so the width and height is divisible by 3. This is so the script can evenly cut out 3 columns and rows from it.

As an example, the actual width and height of the image above is 140px by 225px. However, we inputted 141px by 225px instead (so the width is divisible by 3 as well).

3) This script accesses the BODY onload event (window.onload)