How to select several Thumbnail Images in DHTML

**NGV BalaKrishna** · 04-02-2010

I am trying to learn DHTML for myself. I have done the C, C++ and HTML. Now I have turned to DHTML. I am making small assignment in which I have added some thumbnail images. But the problem is I am not able to select several thumbnail images. So does anyone know how to select several Thumbnail Images in DHTML. The coding related to the same would be greatly appreciable. Please help me as soon as possible.!!

**Praetor** · 04-02-2010

There are many applications on the web by which you can add or select the many thumbnail images in DHTML. I would like to suggest you to download such application. Instead of writing large code for the same purpose it would be better if you use an application which is having the same purpose. You will have to download such application first. These applications are available for free of cost. After downloading you will need to install that application on your system. Hope that doing this will help you for solving your problem.

**Katty** · 04-02-2010

You can use the following instructions for viewing the images in DHTML.
You will have to add the following to the <head> section of your page :

Code:

<script src="viewerofthumbnail.js" type="text/javascript">
</script>

Add the below sample HTML to your page, which shows setting up the script on a regular link and a thumbnail image link :

Code:

<p><a href="http://img203.imagepoint.us/img654/1159/star6.gif" rel="thumbnail" title="This is the biggest Star">Castle</a></p>

<p><a href="http://img242.imagepoint.us/img201/6923/countryxb6.gif"" rel="thumbnail"><img src="thumbnail.gif" style="width: 65px; height: 65px" /></a></p>

**absolute55** · 04-02-2010

I would like to tell you something more about the viewing an images in DHTML, which can definitely help you in future. There are some features of the Image Thumbnail Viewer, which you can download from the web. The below are the features of same :

If you are having an enlarged image that can be optionally hyperlinked.
It is very easy set up- just add to thumbnail links on your page.
If enlarged image is set to be shown "mouseover", it is automatically preloaded for faster display.
Configure larger image to be shown via "click" or "mouseover" of thumbnail.
Define multiple regions for different images to be displayed in.

**opaper** · 04-02-2010

You can use the following code for selecting several Thumbnail Images in DHTML :

HTML Code:

<html>
<head>
<style>
body {
background-color:#0000ff;
color:#E27918;
font-family:Comic Sans MS,Arial;
font-size:12pt;
letter-spacing:3;
}
.thumbNormal {
border:5px solid #0000ff;
}
.thumbSelected {
border:5px solid #ff0000;
}
</style>
<script language=javascript>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbNormal";
}
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
</head>
<body>
Click a photo on the left to view full size.
<table border=0>
<tr>
<td valign=top>
<img id=1 class="thumbNormal" src="http://www.images.com/images/3lio103.jpg" width=130 onclick="SelectImg(1)">
<br><img id=2 class="thumbNormal" src="http://www.images.com/images/3lio20.jpg" width=120 onclick="SelectImg(2)">
<br><img id=3 class="thumbNormal" src="http://www.images.com/images/3lion19.jpg" width=120 onclick="SelectImg(3)">
</td>
<td width=17> </td>
<td valign=top>
<img id=0 src="">
</td>
</tr>
</table>
</body>
</html>