Как изменить картинки по клику?

CSS:

        .redButton > div
        {
            background-image: url('http://i.imgur.com/u1SbuRE.png');
        }
        .redButton.Down > div
        {
            background-image: url('http://i.imgur.com/vi1KLp9.png');
        }
        .link > div
        {
            width: 88px;
            height: 88px;
            display:inline-block;
        }

JavaScript:

 $(".link").click(function(e) {
             e.preventDefault();
             var mainButton = $(e.target).parent();
             $('.link').not(mainButton).removeClass('Down');  
             mainButton.toggleClass('Down');
             $('.content-container div').fadeOut('slow');    
             $('#' + $(this).data('rel')).fadeIn('slow');        
             });

HTML:

 <a class="link redButton" href="#" data-rel="content1">
        <div></div>
        </a>
    <div class="content-container">
        <div id="content1">This is the test content for part 1</div>
    </div>

jsFiddle Hot Demo

Можете убрать $('.link').not(mainButton).removeClass('Down'); тогда прошлая картинка не будет возвращаться при клике на следующую

Вариант 2 но здесь без CSS

<script>
    function change() {
   var img1 = "http://placehold.it/350x150",
       img2 = "http://placehold.it/200x200";
   var imgElement = document.getElementById('test');
   imgElement.src = (imgElement.src === img1)? img2 : img1;
}
</script>
<img src="http://placehold.it/350x150" id="test" onclick ="change();"/>

http://jsfiddle.net/guspersson/s8qLg7ur/