CSS Code, DHTML Code, JavaScript Code

DHTML Image Thumbnail Chooser

This function allows you to easily browse through a series of thumbnails. When you click on a thumbnail, the full-size image is displayed on the right. The currently selected thumbnail becomes highlighted. The DHTML changes the source of an image tag, by taking out the '_tn' of the thumbnail filename. You can use this for your images, just create smaller images with the same filename as the larger image, except with '_tn' before the file extension.


<style>
body {
	background-color:#000000;
	color:#E27907;
	font-family:Verdana,Arial;
	font-size:10pt;
	letter-spacing:2;
}
.thumbNormal {
	border:4px solid #000000;
	cursor: pointer;
}
.thumbSelected {
	border:4px solid #ff0000;
}
</style>

Here's the JavaScript that dynamically changes the image source by using a regular expression.


<script language="JavaScript" type="text/javascript">
var lastID = 0;
function SelectImg(id) {
	if (lastID > 0)
		document.getElementById(lastID).className = "thumbNormal";
	document.getElementById(id).className = "thumbSelected";
	regex = /_tn/;
	document.getElementById(0).src = document.getElementById(id).src.replace(regex, '');
	lastID = id;
}
function LoadTrigger() {
	SelectImg(1);
}
window.onload = LoadTrigger;
</script>

And here's where you'll put in your own images


Click a photo on the left to view full image.
<table border="0">
  <tr>
    <td valign="top"><img id="1" class="thumbNormal" src="/images/family_tn.jpg" width="100" height="50" onclick="SelectImg(1)" /> <br />
      <img id="2" class="thumbNormal" src="/images/ourdog_tn.jpg" width="100" height="50" onclick="SelectImg(2)" /> <br />
      <img id="3" class="thumbNormal" src="/images/fish_tn.jpg" width="100" height="50" onclick="SelectImg(3)" /></td>
    <td width="15"></td>
    <td valign="top"><img id="0" src="" /></td>
  </tr>
</table>
Share

2 Comments

  1. Hi, Your code is great – Thank you. Do you know if it is possible to add a URL to the full-size image once displayed. The URL would need to be different for each image. Hope to hear from you soon, Many Thanks, Lianne.

  2. You'd have to wrap the image in a hyperlink, and then modify the URL when you modify the .src of the image

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image