Clicking image changes to next photo Options

[dsmith530]

I am trying to get a photo on my page (http://duncansphotos.com/about.html) to change with each click. The image I want to turn into a link is "shapeimage_1.jpg" that changes the image to shapeimage_2.jpg, and so on...

I found this which helps a little:
Change Image Shown On Screen:
http://www.dynamicdrive.com/forums/archive...hp/t-16055.html

and here is that section of my code:

<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 293px; width: 630px; height: 293px; left: 35px; position: absolute; top: 4px; width: 630px; z-index: 1; " class="tinyText reflection_0">
<div style="position: relative; width: 630px; ">
<img src="about_files/shapeimage_1.jpg" alt="" style="height: 293px; left: 0px; position: absolute; top: 0px; width: 630px; " />
</div>
</div>

Should I use <a id="one" href="#" onclick="changeIt('next');">...</a> .. ?

As in:
<div style="position: relative; width: 630px; ">
<a id="one" href="#" onclick="changeIt('next');"><img src="about_files/shapeimage_1.jpg" alt="" style="height: 293px; left: 0px; position: absolute; top: 0px; width: 630px; " /></a>
</div>

Does anyone know what I should do?