當我們點擊小圖像時改變大圖像

Question

有一個鏈接給下面打開這個，然後點擊table styles。當我們點擊這些小尺寸的表格圖像，然後在大圖像區域顯示它時，它會顯示所有的表格樣本。

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

我想創造一些像這樣的事情，或者如果你們有任何引用這方面的話，請回復me.Or如果有任何腳本類似。

如果有任何鏈接提供給我任何幫助，請回復。它非常緊急。

我將非常感謝u人 感謝

Answer 1

那麼，你引用的例子是在Flash中創建的，所以要在javascript中獲得相似的幻想外觀並不容易。

但是，在javascript中獲得類似的功能非常容易，但不是花哨的平滑過渡，以及工具提示等的奇幻外觀（這是可能的，但需要更多...）。從點擊縮略圖顯示圖像的一個簡單的例子是這樣的：

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