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 5 of 5

Thread: image swaping

  1. #1
    New Coder
    Join Date
    May 2003
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image swaping

    I am having some trouble with an image click. I am trying to change the image when the user clicks it, but then revert back to the original image when the new image is clicked.

    Basically its an open and close button. The area is open when the screen loads, and closes when the user clicks the button. We need to have the open close button change when the user does this.

    As always thanks in advance for any help.

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Well, where's your code?

    It should be something like this -
    Code:
    <img src="yourimage.gif" onclick="if(this.src=='yourimage.gif'){this.src='yourotherimage.gif'}else{this.src='yourimage.gif'}">
    Probably not an idea to do lots of buttons like that but rather to have a function, but if you only have one buton that's acceptable I think.
    Omnis mico antequam dominus Spookster!

  • #3
    New Coder
    Join Date
    May 2003
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    heres my code snippet

    <a href="#" onClick="toggle('therow'); return false"><img src="../common/images/minus_open.gif" width="20" height="16" border="0" align="absmiddle"></a>

    the toggle functionality is in a script.

    I tried adding your code snippet, but nothing happens. the image doesnt swap out.

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript">
    
    $ = new Image();
    $.src = 'http://www.codingforums.com/images/reply.gif';
    $$ = 'http://www.codingforums.com/images/newthread.gif';
    
    </script>
    </head>
    <body>
    <img src="http://www.codingforums.com/images/newthread.gif" onclick="this.src=(this.latched)?$$:$.src;this.latched=!this.latched">
    </body>
    </html>

  • #5
    New Coder
    Join Date
    May 2003
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    That Did The Trick

    Thank you very much. this worked and did the trick.

    I owe you one.


  •  

    Posting Permissions

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