A DOM-based Sliding Puzzle: Loading the Picture

A DOM-based Sliding Puzzle (6)

Loading the Picture

The puzzle is built from a single picture which we sliced into nine equal squares. We named the small pictures according to their index in the DIV container (see previous page). The top row includes the pictures park0.jpg, park1.jpg, and park2.jpg. The middle row includes the pictures park4.jpg, park5.jpg, and park6.jpg. The bottom row includes the pictures park8.jpg, park9.jpg, and parkblank.jpg. Notice that we switched the bottom right corner with a blank square, as required by the sliding puzzle rules. We then put all file names in the singe picture array. To match the array elements to their corresponding nodes in the DIV container node, we inserted two "br" strings at the right positions (after park2.jpg and after park7.jpg):

var picture = new Array("park0.jpg", "park1.jpg", "park2.jpg", "br",
  "park4.jpg", "park5.jpg", "park6.jpg", "br", "park8.jpg", "park9.jpg",
  "parkblank.jpg");
  // (The above three lines should be joined as one line.
  // They have been split for formatting purposes.)

Once the array is initialized as above, assigning the DOM nodes is easy:

function loadPicture() {
  for(i = 0; i < size; i++) {
    divNode.childNodes[i].src = picture[i];
  }
}

We just step through the 11 elements of the array and assign them to the corresponding children of the divNode node:

divNode.childNodes[i].src = picture[i];

Notice the way we assign properties to nodes, divNode.childNodes[i].src. You can assign any property you want. Any property that is identical to the corresponding HTML attribute will cause that attribute to be assigned. If the property assigned above is src, the assignment's effect will be identical to assigning the SRC attribute of the IMG tag. For this matching to occur, the property name should always be specified in lower case. The assignment for index 2, for example, will look like this:

divNode.childNodes[2].src = "park2.jpg";

Notice that although we have only nine puzzle squares, we assign 11 nodes. The two extra nodes are the BR nodes in positions 3 and 7. The corresponding assignments for these two indices look like this:

divNode.childNodes[3].src = "br";

This assignment sets the src property of the node to "br". Since the BR tag does not include the SRC attribute, the above assignment does not have any visible effect. We chose to implement this assignment in order to have a single assignment loop in the loadPicture() function.

Produced by Yehuda Shiran and Tomer Shiran

Created: August 2, 1999
Revised: August 2, 1999

URL: https://www.webreference.com/js/column45/load.html