Program:
Output:
<html>
<head>
<script>
function display() {
document.getElementById("image").src = "./Tulips.jpg";
document.getElementById("info").innerHTML = "<h1> Flower</h1>";
document.getElementById("id").innerHTML = "<h3> This is a Tulip Flower Image </h3>";
}
function out() {
document.getElementById("image").src = "./Carr.png";
document.getElementById("info").innerHTML = "<h1> Car</h1>";
document.getElementById("id").innerHTML = "<h3>This is a Car Image </h3>";
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a> <img height="100" width="100" id="image" src="./Carr.png" onmouseover="display()"
onmouseout="out()">
</a>
</td>
<td>
<h1 id="info"> Car</h1>
<h3 id="id">This is a Car Image</h3>
</td>
</tr>
</table>
</body>
</html>
Output:
