FREE JavaSCRIPT - Thumbnail Pictures, Thumb Nail Images java script

About

Thumbnail pictures javascript is used in most of webpages inorder to view the selected image.

Features

a) You can easily identify selected image while moving the mouse over it.
b) It is easy creating thumbnail pictures using java script.
c) Just copy the code and use it.

Downloads

Version 1.0 - hthumbnail.zip
Release Date - 04-01-2008.

Preview

Move the mouse over an image on left side to view its full size.

Code

Javascript Code

< !-- Script by hscripts.com -->

<script type="text/javascript">
	var lastsel = 0;
	function SelectImage(id) 
	{
	if (lastsel > 0) 
	{
		document.getElementById(lastsel).className = "normal";
	}
	document.getElementById(id).className = "sel";
	var srcnam = document.getElementById(id).src;
	document.getElementById(0).src = srcnam;
	lastsel = id;
	}
	function LoadTrigger()
	{
		SelectImage(1);
	}
	window.onload = LoadTrigger;
</script>

< !-- Script by hscripts.com -->

HTML Code

<div align=center>
	<b>Move the mouse over an image on left side to view its full size.</b>
</div>

<table border=0 align=center>
	<tr><td valign=top>
	<img id=1 class="normal" src="rabbit.jpg" width=100 onmousemove="SelectImage(1)">
	<br><img id=2 class="normal" src="cat.jpg" width=120 onmousemove="SelectImage(2)">
	<br><img id=3 class="normal" src="dog.jpg" width=100 onmousemove="SelectImage(3)">
	</td>
	<td width=15> </td>
	<td valign=top>
	<img id=0 src="" width=400 height=300>
	</td></tr>
</table>

CSS Code

<style>
	body 
	{
		background-color:#000000;
	}
	.normal 
	{
		border:4px solid #000000;
	}
	.sel	
	{
		border:4px solid #ff0000;
	}
</style>

For customization of this script or any script development, contact us at support@hscripts.com

Usage

a) Unzip the download.
b) You will get the images used in this java script.
c) If you want to add your own images then you have to change the src of image in the following code,
<img id=1 class="normal" src="rabbit.jpg" width=100 onmousemove="SelectImage(1)">
<br><img id=2 class="normal" src="cat.jpg" width=120 onmousemove="SelectImage(2)">
<br><img id=3 class="normal" src="dog.jpg" width=100 onmousemove="SelectImage(3)">
d) Whenever the mouse is moved over an image, the function "SelectImage()" is invoked by passing the id of an image as argument.
e) Copy the code into your page and use it.

License

- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.

Free Thumbnail Pictures Script