I am working on a web page that features three thumbnails displayed on the side.
When one of these thumbnails is clicked, the full-size image should appear in the center of the page with accompanying text below it. Additionally, I have already implemented code to slightly increase the size of the thumbnails when hovered over. However, my main challenge lies in correctly displaying the full-size image.
This is the current code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Gallery Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
img:hover
{
transform: scale(1.250,1.250);
padding:5px;
}
#right
{
position:absolute;
top:50px;
right:100px;
left:250px;
bottom:200px;
}
</style>
<script>
function changeSize(id)
{
var mainImage=document.getElementById("mainImage");
var someImage=document.getElementById(id);
mainImage.src=someImage.src;
}
</script>
</head>
<body>
<div align="center"><img id="mainImage" style="max-width:auto; max-height:auto" align="middle" src="blank.jpg"
alt="blank"/></div>
<table>
<tr>
<td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="cluster" src="cluster1.png"
alt="cluster" onClick="changeSize(id)"/></span></td>
</tr>
<tr>
<td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px" id="gas"
src="gas1.png" alt="gas" onClick="changeSize(id)"/></span></td>
</tr>
<tr>
<td><span style="cursor:pointer"><img style="max-width:70px; max-height:70px"
id="launch" src="launch1.jpg" alt="launch" onClick="changeSize(id)"/></span></td>
</tr>
</table>
</body>
</html>
If you have any suggestions or better ways to achieve this functionality, please feel free to share them.