DHTML Jigsaw Puzzle: NN4

The DHTML Lab Jigsaw Puzzle, Part III: NN4
creating a low-bandwidth customizable puzzle in Navigator 4

This tutorial can be appreciated by users of any browser, any version. The in-line puzzle will work only in Netscape Navigator 4 or Internet Explorer 4, WIN95, Release.
The first Release version of Internet Explorer 4, for the Macintosh, does not support the CSS "clip" property, on which much of the puzzle is based.

The code discussed in this column is specific to Navigator 4. The code actually used in the puzzle is the cross-browser version, which will be discussed next column.

This time, our example uses art works by Picasso, another brilliant artist whose masterpieces lend themselves to demonstrating our technique.

All Picasso images (c) Museo Picasso Virtual, Texas A&M University.
Dr. Enrique Mallen, Director.
https://www.tamu.edu/mocl/picasso/
All rights reserved. Used by permission.

Prerequisites

In our previous two columns, "The DHTML Lab Jigsaw Puzzle, Part I", and "The DHTML Lab Jigsaw Puzzle, Part II", we discussed the coding concepts behind building the puzzle. At the same time, an Explorer 4 version was developed.

Knowledge of the concepts will be assumed for our present column and the emphasis will be on implementing them in Navigator 4.

The puzzle with the new images is reproduced below. Again, all the code used can be found on the final three pages of the column, and you may refer to it as the tutorial progresses.

The puzzle can be dragged by grabbing the image. This feature can be turned off with the labeled toggle button. Break the puzzle into as many pieces as you want. Break it again. Move the pieces into position to solve it. Stuck? Use the hint button. Fed up? Let the puzzle solve itself with the solve button. Load a new puzzle image and play with that one for a while. The images have not been pre-loaded, so you will have to wait for a download when you switch images. At any stage, an optional grid can be turned on and off to assist in piece placement. If the puzzle has a low piece count, the grid may slow the puzzle down on IE4. In NN4, after a puzzle drag or a new image load, the form buttons may not display properly. Scroll the puzzle off the screen and back on to fix, or in WIN95, select View-Refresh.

In This Column

We will discuss the Navigator code necessary for:

• defining the CSS-positioned elements
• inserting the elements into the HTML page
• creating the user controls
• initializing the puzzle
• creating the puzzle piece elements
• clipping the puzzle pieces
• breaking the puzzle
• creating and placing the grid
• dragging the puzzle pieces into position
• solving the puzzle automatically
• positioning the pieces automatically
• the control panel

First, therefore, we must define the CSS elements that make up the puzzle.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Nov. 27, 1997
Revised: Jan. 18, 1998

URL: https://www.webreference.com/dhtml/column10/