gmail's contact card

[iTiSoVER]

right now on mouse hover i display an image of a contact card (but it has no buttons or any writing on it - just a white rectangle) but say i want this image (it is a png file that pops up) to have buttons or other images that are clickable and raise other events, how would i do this? I know i can put an image onto the contact card image as so:css:\[code\]#contactcard:hover{ width:250px; height:150px; padding-top:10px; background-position: center; margin-left: auto; margin-right: auto; text-align: center; overflow:hidden; background-image:url('/images/contactcard.png'); background:#FFFFFF url('/images/anotherimage.jpg') no-repeat 204px 40px;}\[/code\]html:\[code\]form action="demo_form.asp"> <div id="contactcard" > <input type="text" name="fname"> </br> </div> <input type="submit" value="http://stackoverflow.com/questions/14060770/Submit"></form>\[/code\]however, how do i put events on the 'anotherimage.jpg' ? say on mouse click another image pops up?i figure it will need to be done in javascript, but i need some help figuring out how to put an event on the anotherimage.jpg.any help would be appreciated!EDIT:think of gmails contact cards when you hover over a buddy in your list. you have the option to hover over the 'add to circle' button at which point another small pop up appears where you can select a checkbox. something similar to this is what i'm thinking.