Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2012

    Using onclick to change image

    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?
    Last edited by taypandt; 09-27-2012 at 09:06 AM. Reason: Clarity

  2. #2
    Senior Coder
    Join Date
    Dec 2010
    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;"

  3. #3
    New Coder
    Join Date
    Aug 2012
    Ohhh, okay. Thank you!


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts