W3101: Programming Languages: Javascript -- HW2
Due: Anytime on Friday March 06.
Please name the file as "yourname"-HW2-1.html, "yourname"-HW2-2.html and "yourname"-HW2-3.html
for the three solutions of these two problems.
Submit a zipped version of the files in Courseworks.
In this homework, you will implement a simple slideshow of images.
You will need some sample images for it. Please use the images on my website at
http://www.cs.columbia.edu/~ramana/flowers/.
- Here you need to write Javascript code in a html file
to display a larger image of thumbnail images.
- Show about [10-20] images as thumbnails
(of about 70 x 70 pixels in size).
You can arrange them in 2-4 rows of thumbnails.
For example, if you are using 20 images, you can arrange
them in 4 rows of 5 pictures each.
Additionally, show the first image in a larger size
(of about 400 x 400 pixels in size).
- When the mouse is focussed on any of the thumbnail images,
the large image should show that particular image
(in 400 x 400 pixels). That is, the image shown in
the large image should correspond to the thumbnail image
on which the mouse is focused.
- Increase the border size of the thumbnail image
on which the mouse is focused, and keep the border size
of the other thumbnail images normal. For example,
you can use a value of "1" for the border of the
thumbnail images and "3" or "4" for the border of
thumbnail image on which the mouse is focused.
Note: You can set/change the border of an image
by using "document.getElementById(i).border"
Note: Use only one set of images for both the thumnails
and the larger images.
That is, if you plan to show ten images,
use only ten (not twenty).
Use a smaller size for a thumbnail image,
and a larger size to show it as a larger image.
- Modify the above problem to make it an automatic slideshow of images. That is,
- First show about [10-20] images as thumbnails
(of about 70 x 70 pixels in size).
Also have one large image
(of about 400 x 400 pixels in size).
- Have a dropdown menu where the user can
select the slideshow speed as
"Fast", or "Medium" or "Slow".
For these values, show the corresponding image of
each of the thumbnail images, one after another,
at an interval of of 1 or 3 or 5 seconds, respectively.
That is if the user selects "Slow", update
the images once every 5 seconds.
- Increase the border size of the thumbnail image
that is being shown in the larger image box,
and keep the border size of the
other thumbnail images normal.
- Have a text field for the caption of the image.
Update this field with a caption specific to the
image being shown at any time.
- Modify the slideshow problem given above such that
it is not an automatic slideshow of images.
Instead the user should be able to view images one by one.
That is, remove the dropdown box for the speed.
Instead, have two buttons called "Next" and "Previous".
If the user clicks the "Next" button, show the next image.
Similary if the user clicks the "Previous" button, show the
previous image. If the current image being shown is
the last image, and the user clicks the "Next" button,
start all over and show the first image. Similarly,
if the current image being shown is the first image,
and the user clicks the "Previous" button, show the last image.
Update the caption corresponding to the image in the text box.
Use the same set of images that you use for the
first problem.
Note: If you wish, you can use two small images
(like right arrow and left arrow) in place of the "Next"
and "Previous" buttons, respectively.