onClick swap image

[Gibberish]

Anyone know how to do this?

How can I grab the image name "cat05_",add the proper ID to it, then swap the image? I cannot hardcode the name into an array as the page is dynamic so the image name changes on what page the user is on.

What I want it to do is load the image by the number that was pressed. onLoad would be cat05_1. So if number 2 was pressed cat05_2 would be pressed, cat05_3 would load if 3 was pressed.

I am thinkin javascript is the best way to accomplish this.

<tr><td><IMG src="images/cat05_1.jpg" border="0"></td></tr>
<tr>
<td height="20" align="center">
<a href="" class="orangeHL">&nbsp;1&nbsp;</a>
<a href="" class="orangeHL">&nbsp;2&nbsp;</a>
<a href="" class="orangeHL">&nbsp;3&nbsp;</a>
<a href="" class="orangeHL">&nbsp;4&nbsp;</a>
</td>
</tr>

my image folder would be comething like this

cat05_1.jpg
cat05_2.jpg
cat05_3.jpg
cat05_4.jpg
asi02_1.jpg
asi02_2.jpg
asi02_3.jpg
asi02_4.jpg
etc...

[Gibberish]

I am not that great at javascript but here is how I would do it in AS if it helps anyone understand what I want.

myImage = "cat05_1.jpg";
arrName = myImage.split("_");
arrValues = arrName[1].split(".");
newImage = String(arrName[0]+"_"+(Number(arrValues[0]) + 1)+"."+ arrValues[1]);
trace(newImage);

[Gibberish]

If anyone cared for the answer.

<script type="text/javascript">
function SwapImage(imgNum) {
document.myImage.src = "images/cat05_" + imgNum + ".jpg";
}
</script>

<img src="images/cat05_1.jpg" border="0" id="myImage"></td></tr>


<a href="#" class="orangeHL" onClick="SwapImage('1'); return false;">&nbsp;1&nbsp;</a>
<a href="#" class="orangeHL" onClick="SwapImage('2'); return false;">&nbsp;2&nbsp;</a>
<a href="#" class="orangeHL" onClick="SwapImage('3'); return false;">&nbsp;3&nbsp;</a>
<a href="#" class="orangeHL" onClick="SwapImage('4'); return false;">&nbsp;4&nbsp;</a>

I am still researching how to grabt he name of the file, but this is a temp solution.