Edit in JSFiddle

    $("#link1").hover(
        function () {
            $('#containerImage').removeClass();
            $('#containerImage').addClass('showImage1');
        }

    );
    $("#link2").hover(
        function () {
            $('#containerImage').removeClass();
            $('#containerImage').addClass('showImage2');
        }
    );
<div class="container">
    <div id="containerImage" class="defaultImage"></div>
    <div class="imageLinks">
        <a id="link1" href="">First Link</a>
        <a id="link2" href="">Second Link</a>
    </div>
</div>
    .container>div {
        display:inline-block;
        vertical-align:top;
    }
    .container>#containerImage {
        width:400px;
        height:300px;
    }
    .container>.imageLinks {
        width: 300px;
        background: #0c86ff;
        height:300px;
    }
    .imageLinks>a {
        display: block;
        padding: 4px 8px;
        border: 1px solid #000;
        margin: 10px;
    }
    .container>.defaultImage {
        background:#0000ff;
    }
    .container>.showImage1 {
        background:#ff0000;
    }
    .container>.showImage2  {
        background:#00ff00;
    }