Thumbnail image zoom to original perview using JavaScript

Let create cool JavaScript thumbnail zoom effect.

The concept is that there will be thumbnail on page user can see it and original image will be hidden at the same time and when user rollover on that thumbnail hidden main image will smoothly resize on the same place.

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

<div>

<img src="saAction Real.jpg" alt="saAction" id="screen1" 
onmouseout="reducethumb(1); return false;" style="position: absolute;
display: none;" width="240" border="0" height="269">

<img src="saAction Thumb.jpg" alt="saAction" id="thumb1" 
onmouseover="expandthumb(1, 500, 300);">

</div>

Settings :

Thumbnail Image

• id must be "thimbN", N means number example : thumb1, thumb2 etc.
• add "onmouseover" event and cell "expandthumb" function
• "expandthumb" have three arguments (thumbnail ID last number, main image width, main image height)

Mani Image

• id must be "screenN", N means number example : screen1, screen2 etc.
• Style="display:none;"
• add "onmouseout" event and cell "reducethumb" function
• "reducethumb" function take one argument (main image ID last number)
  

thats all when you will mouse over on thumbnail it will show main mage on same plase with smooth scrool effect.

Isn't it cool download demo.