Question

You can see the implementation here http://jsfiddle.net/xNSFA/

Right now, when you hover over the cell, it changes some of the characteristics. But the image doesn’t change. The image only changes when you hover over the image specifically.

How do I get the image to change with everything else?

By the way, it doesn’t HAVE to be done in jQuery. If there is a nice elegant way to do this in CSS, I would love that. But I just assumed it was impossible to do – because of the image manipulation and I didn’t want to set the background of the to be that image. I want the image inside the cell.

Thanks.

Answer 1

You can put the .hover() on the <td> and find the <img> inside to change, like this:

$("table td").hover(function() {
  var img = $(this).find("img")[0];
  img.src = img.src.replace('-grey.png', '-blk.png');
}, function() {
  var img = $(this).find("img")[0];
  img.src = img.src.replace('-blk.png', '-grey.png');
});

You can test it out here, or the jQuery-ish way (though slower – some prefer it…I’d go with the above):

$("table td").hover(function() {
  $(this).find("img").attr("src", function(i, src) {
    return src.replace('-grey.png', '-blk.png'); 
  });
}, function() {
  $(this).find("img").attr("src", function(i, src) {
    return src.replace('-blk.png', '-grey.png');
  });
});