Question

我设置了一个可以使用JavaScript Rollovers运行的小图库。我还添加了一些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;}

更容易，更清洁...

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

2 个答案: