Thumbnails images:
Thumbnails images are very small size images i.e. they are resized images that are not only small physical size but also small file size. The benefit of a real thumbnail is that it loads a small size 'preview' images very fast.
By using an image tag inside an anchor tag, the image becomes a link. Placing the 'preview' thumbnail image in an anchor tag will make it a link to the full size image.
For Example:
If the image is named MyImage.jpg and the thumbnail is MyImg.jpg, then the code for a web page would be like this:
<a href="MyImage.jpg">
<img src="MyImg.jpg" border="0" height=100 width=100>
</a>
Note: The border=0 turns off the lines (border) around an image that is a link. Set to 1 or above to show the border with the 'link' color.
For Example:
<html>
<head>
<title>Thumbnails</title>
</head>
<body bgcolor="#ffff66">
<table bgcolor="#ffffcc" align=center border=2 height=150 width=150>
<tr>
<td>
<a href="image22.jpg" target="_blank">
<img src="image2.jpg" border="2" width="50" height="40">
</a>
</td>
<td>
<a href="image33.jpg" target="_blank">
<img src="image3.jpg" border="2" width="50" height="40">
</a>
</td>
</tr>
<tr>
<td>
<a href="Water lilies.jpg" target="_blank">
<img src="Water lilies.jpg" border="2" width="50" height="40">
</a>
</td>
<td>
<a href="comp1.jpg" target="_blank">
<img src="comp.gif" border="2" width="50" height="40">
</a>
</td>
</tr>
</table>
</body>
</html>
Output:
Figure 1: Thumbnails images display in a table.
When you click on any thumbnails image then the actual size of the image will display as follows:
Figure 2: Actual size of the image.