Question

I have a navbar thing going on here, at the bottom.

Basically when the user hovers over an image it should change the filename from xyz.png to xyz-hover.png, showing a new image. With the cool fade.

Except, every image hovered over changes to the same image.

Anyone know a way around this?

    <script type="text/javascript">

$(document).ready(function() {
      // Change the image of hoverable images
      var openPng = $(".fadeim").attr("src");
      var closedPng = openPng.replace(".png", "-hover.png");


$(".fadeim").hover(function() { 
            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", closedPng).fadeIn(700);
            });


      }, function() {

            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", openPng).fadeIn(700);         
            });
      });
});


</script>

Answer 1

the variable openpng and closepng should be defined in for each loop.

$(document).ready(function() {
      // Change the image of hoverable images

$(".fadeim").each(function(){
var openPng = $(this).attr("src");
var closedPng = openPng.replace(".png", "-hover.png");
$(this).hover(function() { 
            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", closedPng).fadeIn(700);
            });


      }, function() {

            $(this).stop(true, true).fadeOut(700, function() {
                  $(this).attr("src", openPng).fadeIn(700);         
            });
      });
})
});