DHTML Jigsaw Puzzle: Cross-Browser; Image Loading

The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
loading a new puzzle image and shaping the puzzle elements

Image Change

Originally, changeImage() loaded a new image, then shaped the puzzle for Navigator. The shaping is now moved to a separate function, shapeIt().

When changeImage() is called, it checks to see if this is the very first time it is being called. If it is, it means the image has already loaded through the HTML, so it just calls shapeIt().

If, however, a new image is being called for during puzzle play, an HTML string to load the new image is created and assigned to imStr. Then the HTML contents of elImage are replaced by imStr, causing a new image to load. Both browsers will use this method, as it is the best way to have the width and height properties of the new image, necessary for puzzle shaping, properly updated.

function changeImage(whichIm) {
    if (whichIm != "firstPic") {
        imStr = "<IMG NAME='imOrig' ID='elImOrig' SRC=" + whichIm + ">";
        if (NS4) {
            elImage.document.write(imStr);
            elImage.document.close();
        }
        else {
            elImage.innerHTML = imStr;
            elImOrig.onload = shapeIt;
            return;
        }
    }
    shapeIt();    
}
Navigator updates its document.images array before the image fully loads, since it has already has the requisite information from the image file header. Explorer waits for the load to update the all collection. Therefore, if a new image is called for, in Explorer, we set its onload event handler to call shapeIt(), and return from the function to avoid a second call to shapeIt() at the end of changeImage().
Shaping the Puzzle
When shapeIt() is called, it immediatelly reassigns elImOrig to puzzImage, for Explorer. Depending on processor speeds and available resources, this may be redundant. However, it makes sure that Explorer has the correct reference to look up information.
With the new image width and height available to us, we proceed to shape the puzzle:
function shapeIt() {
    if (IE4) puzzImage = elImOrig;
    
    puzzWidth =  puzzImage.width;
    puzzHeight =  puzzImage.height;
    if (NS4) {
        elPuzzle.clip.right = puzzWidth + (bordWidth*2);
        elGrid.clip.right = puzzWidth;
        elGrid.clip.bottom = puzzHeight;
        elControls.top = puzzHeight + (bordWidth*2);
        elControls.clip.right = puzzWidth;
        elControls.clip.bottom = elControls.document.height;
        
        elPuzzle.clip.bottom = puzzHeight + elControls.document.height + (bordWidth*3);
        elPuzzle.left = (window.innerWidth-elPuzzle.clip.width)/2;
    }
    else {
        elControls.style.pixelTop = puzzHeight + (bordWidth*2);  
        elControls.style.width = puzzWidth;
        elPuzzle.style.width = puzzWidth + (bordWidth*2);        
        elPuzzle.style.height = puzzHeight + (bordWidth*3) + elControls.offsetHeight;
        elPuzzle.style.pixelLeft = (document.body.clientWidth-elPuzzle.style.pixelWidth)/2;
    }
}
The Navigator-specific code is exactly as before. The Explorer version is all-new.
First the control panel is moved to just under the image, leaving enough space to simulate a dividing border. Its width is adjusted to the image's width, so left and right edge borders are attained.
Then the complete puzzle's width is changed to that of the image plus 2 border widths. The height becomes that of the image, the contents of the control panel and three border widths. The puzzle shaping is now complete, so we center it horizontally on our page.
The puzzle is now ready for play.



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/puzzCBshape.html