| home / experts / dhtml / column9 |   
|
|
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
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:
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
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. 13, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column9/puzzFinal.html
