Week 4

Weeks 5 & 6 -- slicing, rollovers, interface, forms

Scripting images (conditionals and string handling)

Assignment #3: Due Friday Sept 24. Develop a web page containing a 2 by 2 table with an original graphic in each of the four cells. Each graphic should be 200 pixels high by 200 pixels wide. (Put real pigment, with colors different than the background, right up to the edges to make sure the graphics really touch.) There should appear no space, gaps nor lines between any of the pictures as the table is viewed in both IE and Firefox. (That is, the pictures should nestle seamlessly next to one another so that the viewer cannot see the edges between them.) When one clicks on any of the cells (from either browser), an alert message should display the filename of the picture that was chosen as well as a count of the number of times that picture has been clicked. Below the four pictures should be a button (centered under the pictures). When clicked, the button should make all four pictures change locations, moving to the table cell adjacent to it by clockwise rotation.

Javascript: events, forms, simple rollovers

rollovers and image event handling

text inputs in forms

Arrays of images & the document.images[] array

string handling : many techniques inclucing indexOf and charAt.

more on associative arrays

Discussion of Assignment #4

Assignment #4: Due Friday October 10th

Use Photoshop (available in ATSH224 and ATSH230) or comparable software to draw

a) a face
or
b) a tree

Your drawing should each be exactly 400 pixels wide by 300 pixels high, and stored in .jpg format. Make the picture as realistic as you can (within the time allotted). Slice the image into four pieces, each 200 by 150 pixels. Create a 2 by 2 table containing all four pieces (in some predefined, but scrambled order). Whenever someone clicks on one of the pictures, swap the position of it with the image next to it in a clockwise direction. Whenever the picture is reassembled (i.e., all four pieces are in their proper positions) then pop-up an alert message. Put the table on a web page in your class space and e-mail me the address (http://webclass.sru.edu/cpsc217/... et cetera).

Links that might be worth looking at:

link4 and link5