当我们点击小图像时改变大图像

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>