View Full Version : Using onclick to change image

09-27-2012, 10:03 AM
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";
/* ]] > */

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" />
<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" />

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

09-27-2012, 10:33 AM
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;"

09-27-2012, 03:41 PM
Ohhh, okay. Thank you! :D