<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".mainimage").click(function() {
var oldImage = $("#bigPicture").attr("src");
var selectImage = $(this).attr("src");
$("#bigPicture").attr("src", selectImage);
if (selectImage == "thanksgiving-feast.png") {
$(this).attr("src", oldImage);
} else if (selectImage == "snoopy.png") {
$(this).attr("src", oldImage);
} else if (selectImage == "turkey-cocktails.png") {
$(this).attr("src", oldImage);
} else if (selectImage == "black-friday.png") {
$(this).attr("src", oldImage);
} else if (selectImage == "thanksgiving-title.png") {
$(this).attr("src", oldImage);
}
});
});
</script>
</head>
<body>
<div class="container">
<h3 class="maintitle" align="center"><b>Changing images</b></h3>
<div class="BigImage" align="left">
<img id="bigPicture" class="mainimage " src="thanksgiving-title.png" alt="Title" style="width:500px; height:300px;" hspace="20" />
</div>
<div class="selectImages">
<h5 align="center"><b>Click here to Change Images</b></h5>
</div>
<div class="FourImages" align="right">
<img id="img1" class="mainimage" src="thanksgiving-feast.png" alt="Feast" style="width:150px; height:100px;" hspace="20" />
<img id="img2" class="mainimage" src="snoopy.png" alt="Snoopy" style="width:150px; height:100px;" hspace="20" />
<img id="img3" class="mainimage" src="turkey-cocktails.png" alt="Cocktails" style="width:150px; height:100px;" hspace="20" />
<img id="img4" class="mainimage" src="black-friday.png" alt="BlackFriday" style="width:150px; height:100px;" hspace="20" />
</div>
</div>
</body>
</html>