Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Only need the code. 1. Create a webpage that contains a table with five columns and five rows. 2. The first row will contain a

Only need the code.

1. Create a webpage that contains a table with five columns and five rows.

2. The first row will contain a heading that spans across all columns. This heading must ask the user to click on it.

3. On click of the above heading display a message box that informs the user to click on any image of their choice on your webpage in order to enlarge it. Ideally your enlarged images will have a significant size, usually, atleast 200px X 200px.

4. The second row will contain five images. Use the thumbnail(smaller) images of your favorite St.Patrick's day costumes. (Nothing too scary)

(See Creating Square Thumbnails section below)

5. The third row will contain one cell that spans all columns, that contains an image of you (not a random cartoon image) that is 800px by 800px. (Specify the size in the element)

i. Note: In part b, this image will be replaced when the user clicks on a smaller image from row two.

6. The fourth row will contain one cell that spans all columns. It contains a heading that contains your name.

Note: This field will change in part b, every time a new image is loaded.

7. The fifth row will contain a link to a new page named StPatricks_Costumes.html. This link must be spanned across all columns. Take care to ensure the description is as specified(case sensitive description of the html filename).

Part 2 - Using JavaScript to open an image in the same document

Read the entire problem and write the pseudo code before you start.

Use Firefox

Write JavaScript code so that each thumbnail image in the table opens the larger original image (that you chose) in the cell in row three of the table when the thumbnail is clicked. Also when the picture loads, change the text in the fourth row to text that describes the image.

E.g., clicking on dog_thumb.png should cause dog.png to open in the third row of the table as an 800px by 800px image replacing the image that was previously there.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Online Systems For Physicians And Medical Professionals How To Use And Access Databases

Authors: Harley Bjelland

1st Edition

1878487442, 9781878487445

More Books

Students also viewed these Databases questions