Image swap pickle

[bigblondehead]

Hi I am running a simple image swap script where clicking on one of a row of thumbnails will change the one larger image above. What I would like to do is add a border to the selected thumbnail, which would appear either onclick, on on mouseover (doesn't matter), and would stay visible until a different thumbnail is clicked. I tried just tweaking the image swap script, and swapping images on the thumbnail itself (which worked fine), but I can't figure out how to restore the original thumbnail image when any of the others are clicked.

Any help would be greatly appreciated!!

The javascript is:

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function changeCaption(text) {
if(document.getElementById) {
document.getElementById("counter").innerHTML=text;
}
}



And the relevant source code looks like this:

<div id="content"><img src="images/country_1.jpg" name="country_1" width="629" height="393" id="country_1" />
<div id="navigation"><span id="counter">1/12</span>
<br />
<img src="images/thumbline.png" width="629" height="1" />
<br />

<div id="thumbs">

<img src="images/country_t1.jpg" name="country_t1" id="country_t1" onclick="MM_swapImage('country_1','','images/country_1.jpg',1); changeCaption('1/12')" style="margin-right:5px">
<img src="images/country_t2.jpg" name="country_t2" id="country_t2" onclick="MM_swapImage('country_1','','images/country_2.jpg',1); changeCaption('2/12')" style="margin-right:5px">
<img src="images/country_t3.jpg" name="country_t3" id="country_t3" onclick="MM_swapImage('country_1','','images/country_3.jpg',1); changeCaption('3/12')" style="margin-right:5px">
<img src="images/country_t4.jpg" name="country_t4" id="country_t4" onclick="MM_swapImage('country_1','','images/country_4.jpg',1); changeCaption('4/12')" style="margin-right:5px">
<img src="images/country_t5.jpg" name="country_t5" id="country_t5" onclick="MM_swapImage('country_1','','images/country_5.jpg',1); changeCaption('5/12')" style="margin-right:6px">
<img src="images/country_t6.jpg" name="country_t6" id="country_t6" onclick="MM_swapImage('country_1','','images/country_6.jpg',1); changeCaption('6/12');" style="margin-right:5px">
<img src="images/country_t7.jpg" name="country_t7" id="country_t7" onclick="MM_swapImage('country_1','','images/country_7.jpg',1); changeCaption('7/12')" style="margin-right:5px">
<img src="images/country_t8.jpg" name="country_t8" id="country_t8" onclick="MM_swapImage('country_1','','images/country_8.jpg',1); changeCaption('8/12')" style="margin-right:5px">
<img src="images/country_t9.jpg" name="country_t9" id="country_t9" onclick="MM_swapImage('country_1','','images/country_9.jpg',1); changeCaption('9/12')" style="margin-right:5px">
<img src="images/country_t10.jpg" name="country_t10" id="country_t10" onclick="MM_swapImage('country_1','','images/country_10.jpg',1); changeCaption('10/12')" style="margin-right:5px">
<img src="images/country_t11.jpg" name="country_t11" id="country_t11" onclick="MM_swapImage('country_1','','images/country_11.jpg',1); changeCaption('11/12')" style="margin-right:5px">
<img src="images/country_t12.jpg" name="country_t12" id="country_t12" onclick="MM_swapImage('country_1','','images/country_12.jpg',1); changeCaption('12/12')"/>

</div>
</div>
</div>