3. Write JavaScript code so that each thumbnail image in the table opens the lar
ID: 3681553 • Letter: 3
Question
3. 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 last row to text that describes the image. i. E.g., clicking on babbage_thumb.png should cause babbage.png to open in the third row of the table as an 800px by 800px image replacing the image that was previously there. ii. Note: Write and use a function to replace the large image with the new image and change the existing text in the last row to a caption for the new image. There are many ways to do this feel free to do what seems the most logical to you.
Explanation / Answer
Hey heres the code. I have just taken four rows with one column, if you want you can add more columns too.
<html>
<title>
Tables</title>
<head>
<script type="text/javascript">
function method(source)
{
document.getElementById("p1").innerHTML="This image is "+source;
var image=document.getElementById("curImage");
image.src=source;
image.style.visibility='visible';
}
</script>
</head>
<body>
<style>
table,th,td{ border:1px solid;border-collapse:collapse;border-color:black
}
th,td {
padding:15px
}
</style>
<table >
<tr>
<td colspan="3" align="center">
<img src="image1.jpg" height="50" width="50"/> </td>
</tr>
<tr>
<td colspan="3" align="center">
<img src="image2.jpg" height="50" width="50"/> </td>
</tr>
<tr>
<td colspan="3" align="center">
<img id="curImage" src="image1.jpg" </td>
</tr>
<tr>
<td colspan="3" align="center"><p id="p1">Click Image</p>
</td>
</tr>
</tr>
</table>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.