| home / experts / dhtml / column8 |   
|
|
The most important part of our puzzle is the image that we will break up. This is inserted first in our HTML:
Our image is given two identifiers. The NAME, imOrig, which will be reflected in the document.images array, and the ID, elImOrig, which will be reflected in the document.all collection. The NAME allows us to manipulate it as an image, and the ID as an HTML element. In Explorer, we could use just the ID, but since we are building to a cross-browser version, the NAME is included to assist us later with the Navigator code. The SRC could be any image you want, of course. For our example, it is the Escher hands, and our puzzle now looks like the following. Notice that elControls is 100 pixels wide, the elPuzzle default, but elPuzzle itself has expanded to incorporate the image. We will be setting the proper widths later, dynamically:
To assist users in solving the puzzle, we provide a background grid. It is a simple GIF that we will manipulate dynamically in our script. Our grid image looks like this:
It has nine horizontal divisions and nine vertical divisions. These correspond to the maximum allowable puzzle pieces. If you change the allowable number in your puzzle, create a grid image that reflects this. The grid image can have any dimensions. Ours is 198 pixels square. Include it in your HTML:
Our grid is hidden. For reference only, the following image illustrates the grid's position relative to the other elements:
The final nested element is elControls , from which our users will control the puzzle.
Produced by Peter Belesis and
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Nov. 5, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column8/puzzHTML.html
