Here's the code:

$('.navtab').hover(
  function () {
    var oSrc = $(this).attr('src');
    oSrc.replace(/_o/,'_i');
    $(this).attr('src',oSrc);
  }, 
  function () {
    var oSrc = $(this).attr('src');
    oSrc.replace(/_i/,'_o');
    $(this).attr('src',oSrc);
  }
);

This should get the img src attribute (for example, nav_contacts_o.png), and change it to nav_contacts_i.png, changing the tab's appearance to the rollover image. Using Firebug, I can see that the oSrc variable isn't being altered, and the '_o' version of the src attribute is being set to the image again.

I've tried this with regular expressions and strings in both positions to no avail.

Can someone point out why this isn't working?

1 answer

danwellman 5600
1
point

Change the code to this and it will work:

$('.navtab').hover(
  function () {
    $(this).attr('src', $(this).attr('src').replace("_o", "_i"));
  }, 
  function () {
    $(this).attr('src', $(this).attr('src').replace("_i", "_o"));
  }
);

I can't see what was actually wrong with your original code, it looked like it should work, but this definitely works :D

Answered about 7 years ago by danwellman