0

我建立了一个小型图片库，可以使用 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");
  });
});
4

2 回答 2

0

The error in chrome is "cannot set attribute src of undefined". This is because the expression window.document.gallery does not evaluate to anything. As MrOBrian noted, I do not see how this works in any browser.

An alternative implementation of the html could be:

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

...although it would be more standard if you were just to do it somewhere in your javascript:

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

I setup a jsFiddle for you to play around with it: http://jsfiddle.net/ZfkeU/10/

于 2012-07-26T01:39:04.033 回答
0

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

更简单，更清洁......

于 2012-07-26T02:51:18.413 回答