— Problem - table set up
Table 1– Create a webpage that contains a table with four columns and four rows.
§ The first row will contain a heading that
spans across all columns. This heading asks the user to click on an image to
§ The second row will contain four images. Use the
thumbnail images from your previous lab.
§ The third row will contain one cell that spans all
columns, that contains an image of you that is 750px by 750px. (Specify the
size in the element) (In part b, this image will be replaced when the user
clicks on a thumbnail image from row two.)
§ The forth row will contain one cell that spans all
columns. It contains a heading that contains your name. (This field will change
in part b, every time a new image is loaded.)
§ You will find it helpful to assign id’s to your
tr/th elements as well as your image tags.
It will save you work in part b.
Apply Style to your
table. Make it appealing and professional looking.
Part b (lab11bxx.html) Using
1. Read the entire problem and before you start.
2. Save lab11axx.html as lab11bxx.html.
3. Use Firefox
opens the larger original image (from your thumbnails lab) in the cell in row
three of the table when the thumbnail is clicked.
E.g., clicking on babbage_thumb.png should cause
babbage.png to open in the third row of the table as a 750px by 750px
image replacing the image that was previously there.
When the picture loads also change the text in
the last row to text that describes the image.
Note: Write a
function to replace large image with the new image and change the existing text
to a caption for the new image. There are many ways to do this. Refer to Chapter 4 of DOM Scripting and the
videos online for the possible ways to implement this.