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.

/?icid=in00007

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

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.pooltables./coventry-pool-table/?icid=in00007

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

• javascript

Share Follow edited Apr 24, 2020 at 0:37 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 10, 2010 at 13:00 ChauhanChauhan 2,59199 gold badges3737 silver badges4646 bronze badges 1

• The link is broken, so I am voting to put the question on hold. – halfer Commented Apr 24, 2020 at 0:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.