DHTML Jigsaw Puzzle: IE4; Summary
The DHTML Lab Jigsaw Puzzle, Part II: IE4 cont'd
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:
Screenshot of Puzzle for non-IE4 browsers
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.
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 andAll Rights Reserved. Legal Notices.
Created: Nov. 13, 1997
Revised: Jan. 18, 1998