DHTML Jigsaw Puzzle: Cross-Browser

The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
creating a cross-browser low-bandwidth customizable puzzle

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.

This time, our example uses art masterpieces of another kind. WebReference's own Andrew King and Robert Peyser provide visuals of what they do on their days off.

All images Copyright (c) 1999-2000 internet.com Corp. ,
except Prometheus, Copyright (c) 1995 Robert C. Peyser.
All rights reserved. Used by permission.

Prerequisites

Previously, on Dynamic HTML Lab...

• we discussed coding concepts and began to create an Explorer-specific jigsaw puzzle
• we completed the Explorer puzzle
• we created a Navigator-specific version

Knowledge of the concepts and familiarity with the code will be assumed for our present, and final, puzzle column where we will create a cross-browser version of the puzzle and fix a few bugs found along the way.

The puzzle with the new images is reproduced below. All the code used can be found on the final three pages, and you may refer to it now, as a refresher, or 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:

• cross-browser considerations
• the requisite stylesheet and HTML
• puzzle initialization
• new Explorer code for shaping the puzzle
• creating the puzzle piece elements
• solving the puzzle
• the control panel functions
• dragging the puzzle and puzzle pieces

So, the sooner we get started, the sooner this puzzle madness will be over.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Dec. 17, 1997
Revised: Jan. 18, 1998

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