H I O X INDIA
FREE Javascript
Google
Web hscripts.com
 HOME  ||  Scripts  ||  Purchase  ||  Tutorials  ||  Images  ||  Tools  ||  Directories 
  :-)  Send Page   :-)   Feedback   :-)   Register   :-)   Links   :-)   Support   :-)   Bookmarks :-)  
 Forums   Hosting   Internet Stats   Easy Calculation   FUN Games 

Java Script Source
List All
Date & Time
Calendar
Stop Watch script
Slide Show
Image Effect
Mouse Effects
Color Picker Tool
Dynamic Color
Random Generator
Select All
Form Validation
Textbox Counter
Dynamic Form select
Bookmark
Window / User Info
Security / Authenticate
Status Bar
Title Bar
Cursor Position
Country List
Calculators
Delete Repeated Values
Alphanumeric
Free Games





Free Thumbnail Pictures 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 language=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>


Get free version without ©copyright link for just 5



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
- This javascript (misspelled as java script)/HTML code is given under GPL License
- i.e. Free use for those who use it as it is.
- Free, if your modification does not remove our copyright information and links.
- Detailed License information can be found here
- You can purchase the script if your requirements does not meet GPL License terms.


privacy policy     license     sitemap
© 2004-2005 HIOX INDIA - hioxindia.com

Others