Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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
    Code:
    onclick="scrollUp(); return false;"

  • Users who have thanked devnull69 for this post:

    taypandt (09-27-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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
    •