使用JavaScript覆盖图像并在同一页面上替换为新图像

时间:2011-01-07 16:13:37

标签: javascript html tags

我有一个显示缩略图的图像滚动条和另一个显示拇指指甲放大图像的区域。当点击不同的拇指指甲时,我正在尝试使用javascript覆盖大图像。因此,点击拇指指甲将用拇指指甲的新大图像替换当前的大图像,promblem是有31个拇指指甲,我无法找到一种方法来覆盖它们使用此处显示的show hid div方法。

1 个答案:

答案 0 :(得分:2)

您无需隐藏/显示div。每次单击不同的缩略图时,只需更改较大图像的src属性即可。这应该让你想要你想要的。

<script type="text/javascript">
function showLarge(srcLarge)
{
    document.getElementById("large").src = srcLarge;
}
</script>


<img src="/path/to/thumb1.jpg" onclick="showLarge('/path/to/large1.jpg')"/>
<img src="/path/to/thumb2.jpg" onclick="showLarge('/path/to/large2.jpg')"/>
<img src="/path/to/thumb3.jpg" onclick="showLarge('/path/to/large3.jpg')"/>

<img id="large" src="/path/to/large1.jpg"/>