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
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript - switch DIV content

    Hi

    hopefully I can get the answer I need here, or any help with it will be much appriacted.

    What I'm trying to do is switch the content of a div on the click of an image [button] the div in question holds the images to a jQuery zoom function[class="zoom"]. I'd like to change the images that are used on a button click.

    heres a snippet of the code:

    <div id="image">
    <a href="images/image1.gif" class="zoom">
    <img src="images/images1Large.gif"/>
    </a>
    </div>
    <div id="button">
    <img src="images/image1button.gif"/>
    <img src="images/image2button.gif"/>
    </div>
    I'd like to be able to switch the (id)image div to contain:
    <a href="images/image2.gif" class="zoom">
    <img src="images/images2Large.gif"/>
    </a>
    onClick of img=image2button

    Hope this makes sense, and thanks in advance for any help and suggestions

    Cheers,

    LQ

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Here is the function you need to add to your javascript:
    Code:
    function imgclick() {
            $("#image").html("<a href=\"images/image2.gif\" class=\"zoom\"><img src=\"images/images2Large.gif\"/></a>");
        };
    And of course

    Code:
    <img src="images/image2button.gif" onclick="imgclick()"/>
    That should do the trick. Do let me know if it doesn't and I'll look into solving the problem.


  •  

    Posting Permissions

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