Changing images when hovering over links I wrote a script to change a static image by hovering over navigation links. It works great, however, the script is very long and I'm guessing there is a much more efficient way to write this code. Can anyone give me tips on a better way to do this?

HTML

&lt;ul id="navigation"&gt;
  &lt;li&gt;&lt;a id="1" href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="2" href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="3" href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="box"&gt;
  &lt;img src="default.jpg"/&gt;                    
&lt;/div&gt;


JQuery

$(document).ready(function() {
$('#navigation li a#1').hover(
    function(){
        $(this).addClass('hover');
        $('.box img').attr('src', 'image1.jpg');
    },
    function(){
        $(this).removeClass('hover');
        $('.box img').attr('src', 'default.jpg');
    }
);
$('#navigation li a#2').hover(
    function(){
        $(this).addClass('hover');
        $('.box img').attr('src', 'image2.jpg');
    },
    function(){
        $(this).removeClass('hover');
        $('.box img').attr('src', 'default.jpg');
    }
);
$('#navigation li a#3').hover(
    function(){
        $(this).addClass('hover');
        $('.box img').attr('src', 'image3.jpg');
    },
    function(){
        $(this).removeClass('hover');
        $('.box img').attr('src', 'default.jpg');
    }
);
});
Refactor the function from the data. Then you can just bind the same function to all of the links.

html

  &lt;li&gt;&lt;a id="1" href="#" data-img='image1.jpg'&gt;Link 1&lt;/a&gt;&lt;/li&gt;


js

$('#navigation li a').hover(
    function(){
        $(this).addClass('hover');
        $('.box img').attr('src', $(this).data('img');
    },
    function(){
        $(this).removeClass('hover');
        $('.box img').attr('src', 'default.jpg');
    }
);