Question

下面有一个链接打开，然后点击table styles。当我们点击这些小尺寸的桌面图像然后在大图像区域显示时，它会显示所有表格样本。

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

我想创建这样的东西，或者如果你们有任何参考，请回复我。或者如果有任何类似的脚本。

如果有任何链接提供给我任何帮助，请回复。非常紧急。

我将非常感谢你们谢谢

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>

Answer 2

您可以在this line 上试用。

在上面的示例中，我在image＆amp;上更改了click上的img标记的src。在mouseleave上，存储了原始图像src。

Answer 3

如果您想要的是“类似的东西”，您将永远不会找到一个完全符合您要求的脚本。

您可能希望研究javascript库，例如jQuery，它使您能够将代码绑定到事件，从而使这种事情变得简单。

点击小图片时更改大图像

3 个答案: