Alternative Homework 3: Rollover Puzzle

Due Monday, December 11.

This project uses the JavaScript "rollover" technique to replace the SRC of images in a component array. See the demonstration page to try the concept in action. You'll learn about image rollovers in detail next week. You don't need to understand JavaScript to take on this option, but you do need access to Photoshop or some other graphics program.

Copy the folder called puzzle from introShare. Open the page puzzle.htm within that folder with a browser and look at what's going on.

The rollover puzzle consists of four IMG tags arranged seamlessly to reconstitute a single, original image from which the four component graphics were extracted. Each of the four IMG blocks is connected to a JavaScript routine that replaces the current image source when the mouse enters that IMG block. Each quadrant graphic is 200 pixels by 116 pixels (making the composite or original image 400x232).

Using these parameters, substitute your own images in order to create a more interesting or aesthetically pleasing version of the puzzle. The current puzzle uses 13 composite images (or 52 images overall). You may use fewer, though I think six composites (24 components) may be a sensible minimum. You could change the image dimensions by adjusting the WIDTH and HEIGHT attributes of the IMG tags.

To quarter an image in Photoshop, do the following:

1. Select the entire image (Select All) and copy it.



2. Create a new image and paste in the copied material. Repeat this step 4 times.



3. Close your original graphic so you don't accidentally overwrite it.



4. Go back to the first of the new images. Choose Canvas Size from the Image menu. Set the position selector to the upper left (or "northwest") corner. Set the new canvas size to half the present image dimensions (e.g., 200 x 116). Resize the canvas. Ignore the warning about cutting out material--that's what you want to do.



5. Save this file as nameOfImageX.1.jpg, where "X" is the number of the composite image: if this is your first image, X will be 1.



6. Repeat steps d and e setting the position selector to upper right ("northeast") for image X.2, lower right ("southeast") for X.3, and lower left ("southwest") for X.4.

Open the images directory in your copy of the puzzle folder and delete all the graphics except dot.jpg (which is necessary but not important). Copy your component graphics into images. (You don't need the original, undivided graphics.) Again, these files should be named things like myImage4.3.jpg or image8.1.jpg. Note that you must include at least one alphabetic character before the first number in your image names--you may get a JavaScript error if you don't.

Open the markup for puzzle.htm and locate the SCRIPT container within the HEAD portion of the document. Near the top of that container you will find four var statements (variable declarations) that set up Arrays. An array is an indexed sequence of information, in this case a series of file names. As you'll see, the original contents of these arrays are the names of my component images.

There is one array for each component IMG tag: "nwPix" for the upper left or "northwest" graphic, "nePix" for the upper right or "northeast" graphic, and so forth. Here's what one of these statements looks like:

  var nwPix = new Array("p0.1.jpg","p7.1.jpg","p3.1.jpg","p10.1.jpg",
  "p1.1.jpg","p9.1.jpg","p5.1.jpg","p8.1.jpg","p12.1.jpg", 
  "p2.1.jpg","p6.1.jpg","p4.1.jpg","p11.1.jpg"); 

Every entry except the last is followed by a comma and all the entries are contained in double quotes. The closing quotation mark must come before the comma.

Notice that every image in this set is named "pX.1.jpg." That's because we're dealing with the first or northwest quadrant. If this were the "nePix" array, all the images would be be named "pX.2.jpg." Also note that the value of "X" here--meaning the number of the original image from which this composite is extracted--varies through the set in no particular order: 0,7,3,10,1, and so forth. This order is different in each of the arrays, so that the various component images come up in mismatched sequences, making the puzzle harder to solve. You don't have to follow this pattern.

In each array declaration, remove everything between the parentheses ( ) so that you see something like this:

  var nwPix = new Array(); 

Within the empty parenthesis, write the names of the appropriate image files. If I have a series of six images, for instance, my revised "nwPix" array might look like this:

  var nwPix = new Array("myPix1.1.jpg","myPix3.1.jpg", 
  "myPix6.1.jpg","myPix2.1.jpg","myPix4.1.jpg","myPix5.1.jpg"); 

Remember to change all four arrays and be sure you include the names of all your graphics (i.e., be sure all the arrays have the same number of items).

This is all you need to do. The puzzle should now work with your image content. (By the way, don't worry about using a different number of composite images than the original 13: the scripts adapt to the number of elements in the arrays.)