changer l'image grande quand on clique sur la petite image

Question

Il ya un lien ci-dessous ouvrir ceci et puis cliquez sur table styles .Il montre tous les échantillons de tableaux lorsque nous cliquons sur ces images de petite taille de la table puis ses spectacles dans une grande zone d'image.

http://www.pooltables.com/coventry-pool-table/?icid=in00007

Je veux créer quelque chose comme ça ou si vous les gars avez ce alors tout ce qui concerne la référence s'il vous plaît répondre me.Or s'il y a un quelque chose comme script.

S'il y a un lien qui me fournir de l'aide alors s'il vous plaît répondre.Son urgent.

Je serai très reconnaissant à u guys Merci

Answer 1

Eh bien, l'exemple auquel vous faites référence est créé en Flash, il n'est donc pas facile d'obtenir un look similaire en javascript.

Mais il est assez facile d'obtenir des fonctionnalités similaires en javascript, mais pas avec les transitions douces et lisses, et l'aspect sophistiqué des info-bulles etc (c'est possible, mais ça demande beaucoup plus ...). Un exemple simple d'afficher l'image de Cliquez sur les vignettes pourrait être quelque chose comme ceci:

<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>