Question
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
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started