In: Computer Science
NOTE:
- I have taken some sample images. You can use your own images by
replacing the src attribute of img tags.
Put the images in the same directory where you put these html, css
and js files.
- External CSS and External JS have been used and imported at
appropriate place in the HTML file.
- Read through the comments in the Javascript file (index.js) to
understand its working.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Favorite Park!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<table>
<thead>
<tr>
<th colspan="2">US National Park</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="thumbnail-img" src="np1.jpg" />
</td>
<td>
<img class="thumbnail-img" src="np2.jpg" />
</td>
</tr>
<tr>
<td>
<img class="thumbnail-img" src="np3.jpg" />
</td>
<td>
<img class="thumbnail-img" src="np4.jpeg" />
</td>
</tr>
<tr>
<td>
<img class="thumbnail-img" src="np5.jpg" />
</td>
<td>
<img class="thumbnail-img" src="np6.jpg" />
</td>
</tr>
<tr class="larger-img">
<td colspan="2">
<a target="_blank" href="np1.jpg"
><img class="image-lg" src="np1.jpg"
/></a>
</td>
</tr>
</tbody>
</table>
</main>
<script src="index.js"></script>
</body>
</html>
styles.css
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
tr > th {
cursor: pointer;
}
td {
padding: 5px;
text-align: center;
}
.thumbnail-img,
.image-lg {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
.image-lg {
width: 300px;
height: 300px;
}
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
margin: 0 auto;
width: 50%;
}
table td,
table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr td:hover {
background-color: #f2f2f2;
}
table tr td img:hover {
cursor: pointer;
}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #ff7a0e;
color: white;
}
index.js
//First we get the reference to the DOM node of Table Heading th
const tableHeading = document.querySelector('tr > th')
//We add an event listener to the table heading to listen to mouseover event. We then pass the event listener the callback function that sets the text to "My Favorite Park" when we hover over the heading
tableHeading.addEventListener('mouseover', function () {
tableHeading.innerHTML = 'My Favorite Park!'
})
//We also add a mouseout event on the heading so that when we remove the cursor from the heading, the heading text changes back to "US National Park"
tableHeading.addEventListener('mouseout', function () {
tableHeading.innerHTML = 'US National Park'
})
//now we take the reference to the larger image and the link of the larger image and to the table
const largerImageLink = document.querySelector('.larger-img a')
const largerImage = document.querySelector('.larger-img img')
const table = document.querySelector('table')
// Here we are using event-delegation.
//In event delegation, we add an event listener to the parent rather than to each individual child
// Whenever a thumbnail image is clicked, we check for an event on the table.
//We determine if the click event occurred on the thumbnail image, if thumbnail image is clicked we set the src attribute of the largerImage to the thumbnail image that was clicked
table.addEventListener('click', function (e) {
const target = e.target
if (target.tagName !== 'IMG') {
return
} else {
largerImage.setAttribute('src', target.getAttribute('src'))
largerImageLink.setAttribute('href', target.getAttribute('src'))
}
})
OUTPUT FROM THE BROWSER
NOTE:
Initially, the larger image in row 4 shows the first thumbnail
image. As you click on the different thumbnail images the larger
image will be replaced by that particular image which was
clicked.