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?
@tirnaMar 12.2010 — #One way is to use css positioning to place the button in the centre of the container holding the img and set its original display style to "none".
Then have an onmouseover event handler on the img element that sets the display style of the button to "block". The button will then appear when you roll over the img.
Set an onclick event handler on the button that alternates the src property of the img element between the 'before' and 'after' images.
You also need an onmouseout event handler on the img element that sets the button's display style back to "none". The button will then disappear when you roll off the img.