JQuery change image in div

JQuery change image in div

I don't think im doing this the best way possible so I'm asking you if
there is a better way to do it.
Example: http://www.mudquarters.com (click "in stores")
What I want is to default on the blue shirt and when you click the
swatches they swap image in the div to the appropriate color. They are
somewhat working now, however it defaults on yellow instead of blue and
this method requires my css to include position: "absolute" which ruins my
background tiling for that section in my responsive layout as it is
breaking outside the container.
Is there a way to do this better?
MY CSS:
#shirt img {
position:absolute;
}
MY HTML:
<ul id="swatches">
<li><a href="#"><img src="img/BTN_Blue.gif"></a></li>
<li><a href="#"><img src="img/BTN_Green.gif"></a></li>
<li><a href="#"><img src="img/BTN_Red.gif"></a></li>
<li><a href="#"><img src="img/BTN_Grey.gif"></a></li>
<li><a href="#"><img src="img/BTN_Yellow.gif"></a></li>
</ul>
<div id="shirt" class="large-6 columns">
<img src="img/T_Blue.png">
<img src="img/T_Green.png">
<img src="img/T_Red.png">
<img src="img/T_Grey.png">
<img src="img/T_Yellow.png">
</div>
MY JS:
<script>
$('#swatches li').on('mousedown',function(e){
$('#shirt img').stop().fadeTo(300,0);
if(e.type=='mousedown'){
$('#shirt img').eq( $(this).index() ).stop().fadeTo(300,1);
}
});
</script>
I appreciate your help!
Aaron