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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation How can I swap and then restore the original image using onClick

    Hi,
    How can I swap one image for another using onClick and then restore the original image using another onClick?
    The code that I have been playing around with is listed below. Any help with this would be gratefully appreciated. Many thanks.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <head>
    <script type="text/javascript">
    <!--
    function changeImg(iName, imgOne, imgTwo)
    {
    if (document.images)
    {
    var oImg = eval("document.images."+iName);
    if (oImg == imgOne)
    {
    oImg.src = imgTwo;
    }
    else
    {
    oImg.src = imgOne;
    }
    }
    }
    //-->
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td><img src="flower1.jpg" name="Img1" id="Img1" alt="" width="157" height="198" onClick="changeImg('Img1','flower2.jpg','flower1.jpg');"></td>
    </tr>
    </table>
    </body>
    </html>

  • #2
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not tested

    Code:
    onclick="changeImg(this,'flower2.jpg','flower1.jpg')"
    
    function changeImg(img, imgOne, imgTwo)
    {
    if (!document.images) return false;
    if (img.src == imgOne)img.src = imgTwo;
    else img.src = imgOne
    }
    <edit>added missing semicolon</edit>
    Last edited by gph; 10-01-2005 at 04:45 PM.


  •  

    Posting Permissions

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