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');
    }
);
});

Add a new attribute to your divs, in this case we will use data-filename. You could even 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');
    }
);
});