Cannot Read Property 'replace' Of Undefined

I have a simple menu with images. The image source changes depending on viewer's action (mouseover, click, nothing). I am having trouble to reset the non-active images source to de

Solution 1:

the problem is unactive is a jQuery object not a dom element reference

$("img.menu_btn").hover(function() {
  if ($(this).hasClass('active')) {
    return;
  }
  this.src = this.src.replace('normal', 'hover');
  $(this).addClass('hovered');
}, function() {
  if ($(this).hasClass('active')) {
    return;
  }
  this.src = this.src.replace('hover', 'normal');
  $(this).removeClass('hovered');
});


$('img.menu_btn').click(function() {
  var unactive = $('img.menu_btn').not(this);
  unactive.attr('src', function(i, src) {
    return src.replace('active', 'normal')
  });
  unactive.removeClass("active");
  $(this).addClass('active');
  this.src = this.src.replace('hover', 'active');
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><imgclass="menu_btn"src="//placehold.it/64X32&text=normal" /><br/><imgclass="menu_btn"src="//placehold.it/64X32&text=normal" /><br/><imgclass="menu_btn"src="//placehold.it/64X32&text=normal" /><br/><imgclass="menu_btn"src="//placehold.it/64X32&text=normal" /><br/>

Solution 2:

Following on from my comment, you can replace all this "modification of image URLs" using just a single class and a technique known as "sprites".

A sprite is basically an image file that contains multiple pictures. The one used in my JSFiddle looks like this:

JSFiddle:http://jsfiddle.net/TrueBlueAussie/7v1L2yqd/2/

You reference them by changing the image offsets in the style. In my example it simply adds and removes a hover style, which in the CSS styling causes the background image to be offset.

$('.menu_btn').hover(function () {
    $(this).addClass('hover');
}, function () {
    $(this).removeClass('hover');
});

CSS:

.menu_btn {
    width: 44px;
    height: 44px;
    background: url(http://www.w3schools.com/css/img_navsprites.gif) 00;
}
.hover {
    background-position: -46px0;
}

Handy reference here: http://www.w3schools.com/css/css_image_sprites.asp

If the sprite contained all your icons, you would offset them to their base image, and the .hover class would just move the horizontal position: