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.
