WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column8

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

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape? Microsoft Article: BitLocker Encryption on Windows Server 2008 Go Parallel Article: Intel Thread Checker, Meet 20 Million LOC IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails Avaya Article: Call Control XML - Powerful, Standards-Based Call Control Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks Internet.com eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site

IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action Go Parallel Video: Performance and Threading Tools for Game Developers

Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni Download: PDF & XPS Engine for Your .NET and ActiveX Applications Microsoft Download: Silverlight 2 Software Development Kit Beta 2 30-Day Trial: SPAMfighter Exchange Module Red Gate Download: SQL Toolbelt

Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Beta 2 Runtime MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

IBM IT Innovation Article: Green Servers Provide a Competitive Advantage Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Working with the DOM Stylesheets Collection · Administering RBAC in PHP 5 CMS Framework · xref: Automatic Cross Referencing Script Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Combine BottomCount() with Other MDX Functions to Add Sophistication · Creating a Daemon with Python · The Coming Voice-over-WiMAX Revolution

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

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