Using onclick to change image

[taypandt]

I'm trying to create a web page that uses an onclick event on one image to change the source of another (as in, the first image is either a forward or back arrow and when clicked changes a photo on the page).

Right now, my code isn't working. If I click the image with the onclick event repeatedly very quickly, I see flashes of one of the other images up above in place of the other photo (where it should be), but it doesn't stay. Also, when I change onclick to onmousedown, the image changes as long as my cursor is over the image being used as a button.

Here's my script section:

<script type="text/javascript">
/* <! [CDATA[ */
var curImage = "1";
function scrollUp()
{
    if (curImage == "1") {
            document.images[2].src = "images/keys.jpg";
            curImage = "2";
        }
        else {
            document.images[2].src = "images/saws.jpg";
            curImage = "1";
        }
}
/* ]] > */
</script>

And here's the portion of the code that I'm having trouble with:

<td rowspan="6" align="center" valign="top">
                <img src="images/storefront.jpg" width="640" height="425" alt="Storefront" id="pic1" style="margin-top:10px; border-color:#543203; border-style:ridge" border="15px" />
                <br/><br/>
                <a href=" " onclick="scrollUp();"><img src="images/arrownext.png" height="70" width="68" align="left" /></a>
                <img src="images/arrowback.png" height="70" width="68" align="right" />
            </td>

Can anyone please tell me what I'm doing wrong?

[devnull69]

If you are using onclick on an <a> anchor tag you'll need to make sure that the default action of the link will be prevented. This can be easily achieved by returning "false" from the onclick handler

onclick="scrollUp(); return false;"

[taypandt]

Ohhh, okay. Thank you!