Change example.jpg to example-color.jpg on hover I wrote a script that would change example.jpg to example-color.jpg (.png, .gif would work too) on mouse hover and changes it back on mouse leave. I'm making a portfolio, and I have examples of my work in black and white thumbnails, on hover they switch to colored ones. 

I'm just wondering if I did this in a redundant or 'wrong' way. is it poor how I have functions in variable, and to call it as such?

$(function () {
        var hoverImg = function() {
            var imgSrc = $(this).attr('src');
            var newSrc = imgSrc.slice(0, -4) + '-color.jpg';
            var isColor = imgSrc.split("-").pop();
            var notColor = (imgSrc.slice(0, - 10) +'.jpg');

            if ( isColor !== 'color.jpg' ) {
                $(this).attr('src', newSrc);
            } else {
                $(this).attr('src', notColor);
            }
         }
        var captionImg = function() {
            $(this).children('.gallery-caption').toggleClass('up');
         }

  $('.gallery').on('mouseenter mouseleave', '.gallery-item img', hoverImg);   
 $('.gallery').on('mouseenter mouseleave', '.gallery-item', captionImg);

});
On another approach, you could do spriting. One problem you'll encounter with that approach, where you change src is that the image will take some time to load before the hover image appears. That's annoying. With sprites, you have one image just positioned differently on a container. There's no loading that will happen on hover.

See this example. And the best part is... no JS!

HTML:

&lt;a href="#" class="image twitter"&gt;&lt;/a&gt;
&lt;a href="#" class="image facebook"&gt;&lt;/a&gt;


CSS:

/* Class for setting the image */
.image {
    background-image: url("http://www.alexmourer.com/wp-content/uploads/2013/09/css-sprite.png");
    display: block;
    width: 77px;
    height: 77px;
}

/* class for positioning to the right image (x and y) */
.image.twitter{
   background-position: 0 0;
}

.image.facebook{
   background-position: 308px 0;
}

/* class to offset the image on hover, in this case, up */
.image:hover{
    background-position-y: -154px;
}