Add a new attribute to your div's, in this case we will use **data-filename**. Even you could use the index of each element in the list, but if you want to use custom names in your images is better the use a new attribute.


    <ul id="navigation">
      <li><a id="1" href="#" data-filename="image1">Link 1</a></li>
      <li><a id="2" href="#" data-filename="image2">Link 2</a></li>
      <li><a id="3" href="#" data-filename="image3">Link 3</a></li>
    </ul>
    <div class="box">
      <img src="default.jpg"/>                    
    </div>

Simplify your script

    $(document).ready(function() {
    $('#navigation li a').hover(
        function(){
            //we get our current filename and use it for the src
            var linkIndex = $(this).attr("data-filename");
            $(this).addClass('hover');
            $('.box img').attr('src', linkIndex+'.jpg');
        },
        function(){
            $(this).removeClass('hover');
            $('.box img').attr('src', 'default.jpg');
        }
    );
    });