0

I have a nav bar with images that need to rollover, but they are tranparent pngs. The background is textured so transparent png's are a must. I did this:

       $('.fade').each(function() {  
        var std = $(this).attr("src");
        var hover = std.replace(".png", "_over.png");
        $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
            position:'absolute'
        });
        $(this).mouseenter(function() {
            $(this).stop().fadeTo(600, 0);
        }).mouseleave(function() {
            $(this).stop().fadeTo(600, 1);
        });
    });

Which was posted as a solution here: A better implementation of a fading image swap with javascript / jQuery

It works, but the trouble is the 'fade to' png (which is just a drop shadow) can be seen on page load since it is supposed to be behind the main image: http://jsfiddle.net/qykwV/

Can I hide the '_over.png' image rather than just put it behind the first?

Community
  • 1
  • 1
Tycon
  • 123
  • 2
  • 12

1 Answers1

0

Ok well I got this to work - since the images are transparent I just placed the 'over' image on top and then hid it. I did this by simply changing the html src attributes to the over image and having the script create the non-'over' images like this:

       $('.fade').each(function() {  
        var std = $(this).attr("src");
        var hover = std.replace("_over.png", ".png");
        $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
            position: 'absolute',
            opacity: '0'
        });
        $(this).mouseenter(function() {
            $(this).stop().fadeTo(600, 1);
        }).mouseleave(function() {

            $(this).stop().fadeTo(600, 0);
        });
    });
Tycon
  • 123
  • 2
  • 12