JavaScript rollover image gallery not working in Chrome or IE

Question

I set up a small image gallery that functions with JavaScript Rollovers. I have also added a bit of jquery to augment the images. My problem is that everything works perfectly in Firefox, but not in IE or Chrome. Everything will display in IE and Chrome, but when you click on a thumbnail, the large image won't populate.

Current page code:

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

Current jquery code:

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

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/

Answer 2

use css for this effect:

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

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

is easier and cleaner ...