javascript thumbnails

timer Asked: Mar 22nd, 2016

Question description

Part a(lab11axx.html) — 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 enlarge.

§  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 JavaScript to open an image in the same document

1.  Read the entire problem and before you start.

2.  Save lab11axx.html as lab11bxx.html.

3.  Use Firefox

4.  Write the JavaScript code so that each thumbnail image in the table 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.

Studypool has helped 1,244,100 students
flag Report DMCA
Similar Questions
Hot Questions
Related Tags

Brown University

1271 Tutors

California Institute of Technology

2131 Tutors

Carnegie Mellon University

982 Tutors

Columbia University

1256 Tutors

Dartmouth University

2113 Tutors

Emory University

2279 Tutors

Harvard University

599 Tutors

Massachusetts Institute of Technology

2319 Tutors

New York University

1645 Tutors

Notre Dam University

1911 Tutors

Oklahoma University

2122 Tutors

Pennsylvania State University

932 Tutors

Princeton University

1211 Tutors

Stanford University

983 Tutors

University of California

1282 Tutors

Oxford University

123 Tutors

Yale University

2325 Tutors