JavaScript滚动图像库在Chrome或IE中不工作

我建立了一个小的图像库，可以使用JavaScript滚动。我还添加了一点jquery来增强图像。我的问题是，在Firefox中，所有东西都能完美工作，但在IE或Chrome中却不行。所有内容都将显示在IE和Chrome中，但当您单击缩略图时，大型图像将无法填充

当前页面代码：

<a href="#" onmouseup = "window.document.gallery.src = 'images/Gallery/Landscapes_Album/slides/Tern Lake Sunset.jpg'">
<img src="images/Gallery/Landscapes_Album/thumbs/Tern Lake Sunset.jpg" width="80" height="80" class="gallery-thumb" id="In"/></a>

chrome中的错误是“无法设置未定义的属性src”。这是因为表达式

window.document.gallery

的计算结果不为任何值。正如MrOBrian所指出的，我看不出这在任何浏览器中是如何工作的

html的替代实现可以是：

<a href="#" onmouseup="$(this).find('img').attr('src', 'yourimage.jpg')">
    <img src="http://placekitten.com/80/80" width="80" height="80" class="gallery-thumb" id="In"/></a>​

---

我设置了一个JSFIDLE供您使用：

使用css实现此效果：

<a href="#">
<img class="img1" .../>
<img class="img2" .../>
</a>

---

更简单、更干净…

在非工作浏览器的JavaScript控制台中报告的任何错误？什么元素是

window.document.gallery

？为什么不使用jQuery绑定click事件并选择元素，或者至少使用

getElementById

？如果上面的代码正是您正在运行的代码，我不确定单击在任何浏览器上是如何工作的。谢谢您的评论！我对jQuery比较陌生，我花了一段时间才意识到有一种更简单的方法可以做到这一点。我现在在所有主要浏览器中都工作得很好。我停止使用JavaScript，而是用jQuery交换图像。

$(".gallery-thumb").parent().mouseup(function() {
    $(this).find('img').attr('src', 'yourimage.jpg');
});

<a href="#">
<img class="img1" .../>
<img class="img2" .../>
</a>

a{position:relative;}
a img{position:absolute;top:T;left:L;}
a img.img1{ z-index:101;}
a img.img2{ z-index:100;}
a:hover img.img1{ display:none;}