JavaScript翻转图片库无法在Chrome或IE中使用

Question

我建立了一个小型图片库，该库可与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>

当前的jQuery代码：

// jQuery fade-in and fade-out

$(function() {
  // OPACITY OF BUTTON SET TO 50%
  $(".gallery-thumb").css("opacity","0.5");

  // ON MOUSE OVER
  $(".gallery-thumb").hover(function () {

    // SET OPACITY TO 100%
    $(this).stop().animate({
       opacity: 1.0
      }, "slow");
    },

    // ON MOUSE OUT
    function () {

    // SET OPACITY BACK TO 50%
    $(this).stop().animate({
      opacity: 0.5
    }, "slow");
  });
});

Answer 1

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

...虽然如果您只是要在javascript中的某处进行操作，这会更标准：

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

我设置了一个jsFiddle供您使用： http : //jsfiddle.net/ZfkeU/10/

Answer 2

使用CSS可以达到以下效果：

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

CSS：

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

更容易和更清洁...