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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can onclick image swap change different image?

    Hi, I'm very new to java; about the only thing I know how to do successfully are onmouseover events. I've been searching for an hour on many different sites and I haven't found the answer to my question.

    I'm creating an image gallery and I am currently using an iframe and the target command to have the full-size images appear on the page without having to reload it. I would like to, instead, start off with a blank image and, when the user clicks on an icon, have that blank image swap to the full-size version of the icon. Is this possible?

    To reiterate, is it possible to click on icon1.jpg and cause that to swap pictureA.jpg with pictureB.jpg?

    Any help would be greatly appreciated.

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    http://www.huddletogether.com/projects/lightbox2/

    That might be a nice thing for you to try. It's easy and free, and works great. I see a lot of sites that use it.

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, that's... pretty amazing. Thanks a lot!

  • #4
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    You first need to preload the images that are swapped in/out:
    Code:
    var im1 = new Image(); im1.src =  "image1.jpg";
    var im2 = new Image(); im2.src =  "image2.jpg";
    Then you need to identify the target image:
    Code:
    <img id="target" src="blank.jpg" />
    Now your clickable image should have a onclick event attached:
    Code:
    <a href="#" onclick="target.src=im1.src; return false;"><img src="icon1.jpg" /></a>
    
    <a href="#" onclick="target.src=im2.src; return false;"><img src="icon2.jpg" /></a>
    John Rostron

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Posts
    110
    Thanks
    0
    Thanked 1 Time in 1 Post
    its possible with javascript.. very simple just check in jscript tutorial. You can get bult in script also for all this. m also doing like this for one of my site

  • #6
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for all the advice, it's working great!


  •  

    Posting Permissions

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