SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    0 Post(s)
    0 Thread(s)

    Before and After

    I have two images, a before and after. I was hoping to rollover the "after shot" where a little button pops up in the center where you can click on "after" which swaps the "after" image with the "before" image. Any idea how to do this?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    101 Post(s)
    4 Thread(s)
    First start with both images on the screen, so that people without javascript then still have them.

    Then with scripting, obtain a reference to the parent element for both of the images and add a class name called "hidden" to the second image so that you can hide it.

    When doing that, it helps if you add a toggle property, or perhaps a before/after property, to each image so that your script can easily gain a reference to the other image.

    Then, attach an onmouseover event on to the image (or both of them) which creates and shows the button, with an onclick event for the button itself.

    That onclick event adds the hidden class to its image, and removes it from the other image.

    That is the basic process of what's involved.

    Let us know how you go, and don't forget that we are here to help advise you when you get stuck.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Posting Permissions

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