Part a (lab12a xx .html) — Problem - table set up Table 1 – Create a webpage tha
ID: 3588993 • Letter: P
Question
Part a (lab12axx.html) — Problem - table set up
Table 1 – Create a webpage that contains a table with five 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 five images. You will need to create thumbnails like you did for the previous lab. Use these thumbnail images for the five images in this row. You will use the larger versions of the thumbnails later in the 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. Make sure you give all your image tags a name and id for this lab.
The forth row will contain one cell that spans all columns. It contains a heading that contains your name.
You will find it helpful to assign id’s to your tr/th elements
Apply Style to your table. Make it appealing and professional looking.
Part b Using JavaScript to open an image in the same document
1. Read the entire problem and before you start.
2. Write the JavaScript code so that each thumbnail image in the table opens the larger original image 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. I would recommend writing a function with two parameters (one for the file name of the image and one for the new text to display in the cell) and call the function with the onclick event handler for each of the thumbnail image tags. This is only one was to implement this lab. You can either try this or go for another method.
This is what I have so far, all I need is help with the very last step to make the last row change to an image caption. The way I did it does not work, please help!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Dallas Baker, dallascb@email.sc.edu, sectionZ1A, 9/29/17, football -->
<title> Lab12a: Image Gallery </title>
<meta charset="utf-8">
<style>
#first {background-color:#FFB6C1; font-family:Lucida Handwriting; font-size:22pt; color:#FFF0F5;}
#second {background-color:#FFF0F5;}
#third {background-color:#FFF0F5;}
#imgCaption {background-color:#FFB6C1; font-family:Lucida Handwriting; color:#FFF0F5;}
body {background-color:#DCDCDC;}
table {border-style:solid; background-color:#7F7F7F;}
</style>
<script>
function changeImage(imageName)
{
var toChange = document.getElementById("ouch")
toChange.src = imageName
var elementToUpdate = document.getElementById("fourth")
elementToUpdate.innerHTML = newMessage
}
</script>
</head>
<body>
<table>
<tr id="first">
<th colspan="5">Click on an Image to Enlarge</th>
</tr>
<tr id="second">
<td><img src="lol-tNail.png" alt="Lol Thumbnail"
name="lol" id="lol"
onclick="changeImage('lol750.jpg');
displayMessage('Sexy Dog Pose')"></td>
<td><img src="smile-tNail.png" alt="Smile Thumbnail"
name="smile" id="smile"
onclick="changeImage('smile750.jpg');
displayMessage('Dog Smiling Really Creepily')"></td>
<td><img src="smirk-tNail.png" alt="Smirk Thumbnail"
name="smirk" id="smirk"
onclick="changeImage('smirk750.jpg');
displayMessage('Dog With a Smirk on His Face')"></td>
<td><img src="swim-tNail.png" alt="Swim Thumbnail"
name="swim" id="swim"
onclick="changeImage('swim750.jpg');
displayMessage('Funny Dog Underwater')"></td>
<td><img src="tongue-tNail.png" alt="Tongue Thumbnail"
name="tongue" id="tongue"
onclick="changeImage('tongue750.jpeg');
displayMessage('Dog With Tongue Wrapped Around His Head')"></td>
</tr>
<tr id="third">
<th colspan="5"><a href="ouch.jpg">
<img src="ouch.jpg" alt="Ouch Picture"
name="ouch" id="ouch"></th>
</tr>
<tr>
<th id="imgCaption" colspan="5">My Name</th>
</tr>
</table>
</body>
</html>
Explanation / Answer
As mentioned in the question given here, you don't need to add image caption in last row.
But still if you want to add it use tag "figcaption"
Syntax:
<figcaption> Content here </figcaption>
Note:
You will have to use this tag just after img tag i.e in third row itself!