Change large image when we click on small image

There is a link give below open this and then click table styles. It shows all samples of tables when we click these small size table images then its shows in large image area.

http://www.开发者_JS百科pooltables.com/coventry-pool-table/?icid=in00007

I want to create some thing like this or find any similar script.

Well, the example you refer to is created in Flash, so to get similar fancy look and feel in javascript is not easy.

But it is quite easy to get similar functionality in javascript, but not with the fancy smooth transitions, and fancy look of the tooltips etc (it is possible, but requires a lot more...). A simple example of displaying image from click on thumbnails could be something like this:

<style>
  table#thumbnails{
    background-color:white;
  }
  table#thumbnails tr td img
  {
    cursor: pointer;
  }
</style>

<script type="text/javascript">
function showImage(image){
  var mainImage = document.getElementById('mainImage');
  mainImage.src = image; 
}
function toggleThumbnails(){
  var thumbnails = document.getElementById('thumbnails');
  if(thumbnails.style.display == 'block'){
    thumbnails.style.display = 'none'; 
  } else {
    thumbnails.style.display = 'block'; 
  }
}
</script>
<input type="button" value="Show/hide thumbnail list" onclick="toggleThumbnails()" />
<table id="thumbnails" style="display:none;">
<tr>
 <td><img src="thumb1.png" title="Item 1" onclick="showImage('img1.png')" /></td>
 <td><img src="thumb2.png" title="Item 2" onclick="showImage('img2.png')" /></td>
 <td><img src="thumb3.png" title="Item 3" onclick="showImage('img3.png')" /></td>
</tr>
<tr>
 <td><img src="thumb4.png" title="Item 4" onclick="showImage('img4.png')" /></td>
 <td><img src="thumb5.png" title="Item 5" onclick="showImage('img5.png')" /></td>
 <td><img src="thumb6.png" title="Item 6" onclick="showImage('img6.png')" /></td>
</tr>
<tr>
 <td><img src="thumb7.png" title="Item 7" onclick="showImage('img7.png')" /></td>
 <td><img src="thumb8.png" title="Item 8" onclick="showImage('img8.png')" /></td>
 <td><img src="thumb9.png" title="Item 9" onclick="showImage('img9.png')" /></td>
</tr>
</table>
<div>
<img id="mainImage" src="img1.png" /> 
</div>

You can try out something on this line .

In above example, I've changed src of img tag on click on image & on mouseleave, original image src is stored.

You'll never find a script that does exactly what you want if what you want is 'something like that'.

You might want to investigate javascript libraries such as jQuery, which make this kind of thing easy by enabling you to bind code to events.