Change example.jpg to example-color.jpg on hover
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;
}