Results 1 to 2 of 2
Thread: Before and After
Mar 11, 2010, 23:16 #1
- 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?
Mar 12, 2010, 02:21 #2
- Join Date
- Jan 2007
- Christchurch, New Zealand
- 59 Post(s)
- 3 Thread(s)
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
The 2013 SitePoint Awards - Nominate your heroes now!