CODEWITHSUNDEEP
jqueryhtmlcss
marcamillion
marcamillion

Reputation: 33755

How do I change image on hover of <td> that the img is in - in jQuery?

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.

Upvotes: 3

Views: 7305

Answers (5)

user113716
user113716

Reputation: 322492

New answer: I didn't notice that you didn't want to use a background image. It can be done without, but you would just need to load both images.

Example: http://jsfiddle.net/patrick_dw/xNSFA/7/

html

<td>
    <span class="sit-in-the-corner">1</span>
    <img class="on" src="http://fiwishop.com/feedback/images/2-up-icon-blk.png" />
    <img class="off" src="http://fiwishop.com/feedback/images/2-up-icon-grey.png" />
</td>

css

table td img.off{
    display:none;
}
table td:hover img.off{
    display:inline;
}
table td:hover img.on{
    display:none;
}

Original answer:

I'd use CSS instead of javascript, but you'll need to change the <img> element to an <a> element, and use the background- properties.

Example: http://jsfiddle.net/patrick_dw/xNSFA/5/

html

<td>
    <span class="sit-in-the-corner">1</span>
    <a class='image'></a>
</td>

css

table td a.image {
    width: 100%;
    height: 100%;
    background-image:url(http://fiwishop.com/feedback/images/2-up-icon-blk.png);
    background-repeat:no-repeat;
    background-position: center center;
    display:block;
}
table td a.image:hover {
    background-image:url(http://fiwishop.com/feedback/images/2-up-icon-grey.png);
}

Upvotes: 4

Nick Craver
Nick Craver

Reputation: 630389

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');
  });
});

Upvotes: 5

Ben Blank
Ben Blank

Reputation: 56572

You have two issues in your script. First, you need to attach the hover to the <td>, not the <img> itself. If you run your test, you'll see that the image does change when leaving the actual image. Second, you seem to have your replaces reversed, so that the image first changes when you leave the hover area.

Here's a version of your script with both changes.. I think this is doing what you wanted?

Upvotes: 1

David Thomas
David Thomas

Reputation: 253318

The following should work:

$('td').hover(
  function(){
    $(this).find('img').attr('src','path/to/new/image.png');
  },
  function(){
    $(this).find('img').attr('src','path/too/old/image.png');
  }
);

Upvotes: 1

Ben
Ben

Reputation: 62364

td:hover img {
     //css attributes to change
}

OR to change the source

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

The image source can't be changed via CSS, but you can change the background image, or background position.

Upvotes: 1

Related Questions