if you click on the tiger name button then the box image should be changed to the tiger image. same for the next 2 buttons. also, create 1 reset button to remove the box image and then display any default image in the box. also, create 1 button to show the name of the image present in this image box. (result shown in an alert box.).
a little more context would be desirable. Your question is a bit confused. Please post your code next time. If I understood correctly, you can solve this with JavaScript:
Assuming you have your image tag and three buttons
<img id="tigerImage" alt="this is the tigers name" src="/assets/images/placeholder.jpg">
<button onclick="setImage()">Set Image</button>
<button onclick="resetImage()">Reset Image</button>
<button onclick="showName()">Show Name</button>
The id is important, you can address it with JS:
Vanilla JS:
function setImage() {
document.getElementById("tigerImage").src="/assets/images/tiger.jpg";
}
function resetImage() {
document.getElementById("tigerImage").src="/assets/images/placeholder.jpg";
}
function showName() {
var imageName = document.getElementById("tigerImage").alt;
alert(imageName);
}