<!DOCTYPE html>
<html>
<head>
<title>Image Toggle Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Toggle Image</h1>
<div id="imageContainer">
<img id="image" src="./kitten.png" alt="Kitten Image">
</div>
<button id="toggleImage">Toggle Image</button>
<script>
$(document).ready(function(){
$("#toggleImage").click(function(){
var currentImage = $("#image").attr("src");
var newImage = currentImage === "./kitten.png" ? "./lion.png" : "./kitten.png";
var newAltText = currentImage === "./kitten.png" ? "Lion Image" : "Kitten Image";
$("#image").attr("src", newImage);
$("#image").attr("alt", newAltText);
});
});
</script>
</body>
</html>