DHTML Jigsaw Puzzle: IE4; Clipping the Pieces | WebReference

DHTML Jigsaw Puzzle: IE4; Clipping the Pieces


The DHTML Lab Jigsaw Puzzle, Part I: IE4
Building and clipping the puzzle pieces

Returning from createPieces(), we have all the required elements created. We continue in the createPuzzle() function:

    function createPuzzle() { if (!isCreated) { createPieces() }; pieceWidth = puzzWidth/puzzAcross; pieceHeight = puzzHeight/puzzDown; while (pieceCount <= puzzPieces) { pixT = topCount * pieceHeight; pixB = (topCount + 1) * pieceHeight; for (i=1; i<=puzzAcross; i++) { window.status = "Clipping image for piece... " + pieceCount; tempEl = eval("PIECE" + pieceCount); document.images["imPiece" + pieceCount].src = document.images["imOrig"].src; tempEl.style.pixelLeft = puzzLeft; tempEl.style.pixelTop = puzzTop; pixR = pieceWidth * i; pixL = pieceWidth * (i-1); tempEl.style.clip = "rect(" + pixT + sp + pixR + sp + pixB + sp + pixL + ")"; tempEl.clipLeft = pixL; tempEl.clipTop = pixT; pieceCount++ } topCount++ } if (isGrid) {setGrid()}; isNewPuzz = false; isCreated = true; pieceCount = 1; topCount = 0; window.status = ""; }

We first establish how wide and how high each piece should be. Then we enter a while loop to perform the same tasks on all pieces. We initialize two variables to store the top and bottom pixel value of each row, using topCount, which we originally initialized at 0. If our pieceHeight was 90, for example, pixT would be 0 (0 * 90) and pixB would be 90 (1 * 90) on the first go-through. On the second, pixT would be 90 (1 * 90), and pixB would be 180 (2 * 90). With the top and bottom values ready, we enter a for loop to perform a group of tasks on all pieces in one row across. Our courtesy tracking is displayed in the status bar.

We retrieve an element to work with by incrementing "PIECE" with pieceCount. The image in this element has its src property set to the same image as the puzzle. Since this image is cached, it is loaded instantly. The piece element is then positioned exactly where the puzzle image is positioned. We now create two variables to store the left and right clip values. If our pieceWidth is 80, for example, pixL will be 0 (80 * (1-1)), and pixR will be 80 (80 * 1). The second piece in the row, in the second go-through of the for loop, when i will have been incremented, will have a pixL of 80 (80 * (2-1)), and a pixR of 160 (80 * 2).

We now take the four pix values and use them to set the value of the element's clip property.

Reminder: Explorer 4 Release for the Macintosh does not support the clip property.

The clip property and how to set it is described in detail in column 2. Since it is a cumbersome string value with several spaces we use our sp variable. We have now created an element that is just as large as the original puzzle image, has the same image contained, but is clipped to resemble a puzzle piece.

We create clipTop and clipLeft properties for this element as we did for elPuzzle, and increment the pieceCount variable. We continue in the for loop until all the pieces in a row have been clipped. Then we increment topCount, and go through the while loop again, creating new top and bottom clip values and clipping the elements for the pieces in the second row. We continue this cycle until all pieces have been clipped, that is, until pieceCount is equal to puzzPieces.

Our puzzle is now ready. We check to see if our grid should be on. If it is, we call the setGrid() function. Assume for now that it sets the grid properly. We reset all the variables we used to create the puzzle and clear the status bar display.

Finally, we can return to the breakUp() function and disperse the pieces.

Produced by Peter Belesis and

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

URL: http://www.webreference.com/dhtml/column8/puzzBuild.html