Good morning Mr. Phelps.

Your mission, should you decide to accept it (or not), is to continue work on a 2 x 2 sliding image puzzle.

Here's the outline of what you're trying to do, and pointers to examples to help you out. Some of this you may have done last week. What doesn't get done this time can be finished next week, at our last class.

(I will try to be in class on Mon Jan 2, but I may be late and/or absent; I'm coming back from Montreal Mon morning and don't know exactly when I'll arrive. If I'm not here, start in on this stuff, study my examples, look at the JavaScript Console and DOM window to see what's wrong, and help each other.)

  1. Chop a square photo into 4 pieces.
  2. Make a webpage that displays the original image by showing each piece in the right place. Here's an example of placing an image in different places to get you going.
  3. Now make a grey image the same size as one of the pieces. (I did this with the Gimp, select all, paint bucket tool.)
  4. Copy the webpage with the image, but replace one of the image pieces with the grey image; that'll be the "hole" that the other pieces slide into.
  5. Look at this example of changing images by clicking. Put something like this into yours, adding ID's and onClick="..." stuff as needed to your images. This is going to be the trickiest part of this project; remember the "if ... then ... " stuff we looked at before and use some of that sort of stuff to figure out which images to swap. Have it do something when you click on it, like change to a different color, as a start.
  6. Another nice feature is to have the square that your mouse is over be highlighted with a colorful border. Here's an example of that sort of mouse over outlining.
  7. If you're completely stuck, you can take a look at how the way I did it, at 8_puzzle.html. See if you can figure out how it works, and adapt it for your images. Remember that there's lots of ways to do this sort of thing; mine example is only one way.

Good luck Mr. Phelps.