Due date:  July 25, 2001 (Monday)

This program will be counted as 1.8 programs.

Write an Active Server Pages program h5slideshow.asp to accept an URL parameter "dir" and use it to download images and their descriptions to present a slide show using dynamic HTML.  Thus, this program uses a mix of server-side and client-side technologies that should be working for both IE 5.x and Netscape 4.x (but not necessarily Netscape 6.x).

For example, the URL:

http://dcm.uhcl.edu/myaccount/h5slideshow.asp?dir=gwtw

uses the images stored in the directory gwtw created in Homework #2 and the table ImageDescription created in Homework #4.

In IE 5.x, the page looks initially like:

The message line is in the top of the page.  It should initially display "Loading images, please wait..." and then proceed to download all images to the browser (65 of them in gwtw.)  When all images are loaded, the message line becomes "Images loaded. Enjoy!"

Note the four buttons that follow and that the "Prev Images" buttons are disabled.  The "Prev Images" and "Next Images" buttons should be enabled only when such images exist.

A table comes next and it displays two images of the same width (200 pixels).  The second row of the table displays the image descriptions as obtained from the database ImageDescription table.

When the "Next Images" button is clicked, the page displays the third and fourth images:

Note that clicking the button does not submit any request to the Web server.  Instead, dynamic HTML should be used to display the new images (as they are already loaded to the browser).  Thus, the response should be much faster.

Clicking the "Last Image" button:

Note that the second column is empty since there is an odd number of images.  Also, the "Next Images" button is now disabled.

The cross browser code for Netscape 4.x is much tricky as its DOM is quite restricted.  For example, button disabling can only be done in Netscape 6.x, not 4.x, so it is not a requirement.  Also, Netscape's support of CSS is also more limited and unstable.  Thus, to make things easier, input text fields are used to display messages.  The page should initially be displayed in Netscape as:

Note that descriptions are now displayed in input text fields.  The images are always 200 x 200 and buttons are not disabled.

After clicked the "Next Image" button:

After clicking the "Last Image" button:

Because of the limitations, the Netscape's implementation may be unstable.  For example, it may not respond well to window resizing.  This will be acceptable.

Stay as close to the output above as possible. Significant departure from the look and feel will result in lower grades.

Turn it source code and screen shots.

Hints:

For an example of mixed server-side and client-side technologies, read homework #6 of the Spring semester of this course.

Here is the transparency gif.