Lesson 3 -- more with images and JavaScript

Images:

a bit more on Photoshop

scanning and digicam

Slicing with ImageReady

JavaScript:

Beginning JavaScript: alert messages and debugging. Review of functions

input, feedback and basic objects

rollovers and image event handling.

Exercise #3: 

Create six images, each 100 pixels square. Name the files sequentially (e.g., file1.png through file6.png or pic0.jpg through pic5.jpg). Build a web page which displays two of the six images (e.g. file2.png and file5.png). Whenever one clicks either image, the picture displayed at that location changes to the next image in succession, starting back at the beginning of the sequence whenever you move past the end (e.g. file5.png goes to file6.png goes to file1.png). Whenever the two image tags display the same picture (i.e., when their source is the same), then show an alert message that announces the file name of that shared picture.

Exercise #4: 

Use Photoshop  (or another image editor) to draw

a) a face
or
b) a tree

Your drawing should each be exactly 300 pixels by 300 pixels in size, and in either .jpg or .png format. Make the picture as realistic as you can (work no more than three hours on each). Slice the image into nine pieces, each 100 pixels square. Create a 3 by 3 table containing eight of the nine pieces (in some predefined, but scrambled order) with one remaining cell left blank. Whenever someone clicks on a picture next to the blank cell (either above, left, right or below it), swap the position of the blank and non-blank cells. When the picture is reassembled (i.e., all eight slices are in their proper positions, then replace the blank picture by the missing ninth piece.