DHTML Jigsaw Puzzle: IE4; Summary

The DHTML Lab Jigsaw Puzzle, Part II: IE4 cont'd
Summary

In the last two columns, we developed a DHTML application. The techniques we used were well-known to us from previous columns, but combined they became more than the sum of the parts.

For example, we

• used the mousedown and mouseup events introduced in column 1, used in column 2, expanded on in column 3, and used to track dragging in column 6 and column 7.
• clipped the piece elements with techniques discussed in column 2
• stretched the grid like the dynamic images in column 3
• swapped the puzzle image after user choice, as we did with the database image in column 4
• inserted HTML into an already existing document to create the piece elements using a method discussed in column 5
• dragged elements on the screen using the code developed in column 6 and column 7

Practice these techniques with our puzzle in its final form:

We created a single CSS-positioned element, the puzzle, that contained other CSS-positioned elements, the puzzle image and controls. Styling was added using the <STYLE> tag, and the in-tag STYLE= attribute. Similar elements had a style CLASS applied.

We introduced into the "puzzle" world, the concept of a single image download. Any image of the user's choice can be made into a puzzle. The secret is clipping. By creating a CSS-positioned element for every puzzle piece using the now-cached original image, we can create the illusion of a partial image through clipping.

With our slightly-modified drag and drop code, we allowed the user to position the pieces and have them snap into position in the puzzle. Several straight-forward JavaScript functions allowed us to track the user's progress.

Essentially, that's what we accomplished. As before, the full code can be found on the following three pages. Before moving on, you may want to refresh your memory on a particular aspect of our application:

• defining the CSS-positioned elements
• inserting the elements into the HTML page
• creating and placing the grid
• creating the user controls
• building the script
• initializing the puzzle
• creating the puzzle piece elements
• clipping the puzzle pieces
• breaking the puzzle
• setting the grid
• grabbing the puzzle pieces
• moving the puzzle pieces
• dropping and positioning the puzzle pieces manually
• solving the puzzle automatically
• positioning the pieces automatically
• the Hint button
• the Drag ON/OFF button
• the select menus

Next Time, on Dynamic HTML Lab

We'll take what we have learned in the last two columns, add a few proprietary routines and create a Netscape Navigator 4 version of the puzzle. Then, of course, we'll combine the scripts and develop a cross-browser version.

Now, on to the complete code...

Produced by Peter Belesis and

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

URL: https://www.webreference.com/dhtml/column9/puzzFinal.html