I am working on a site that uses three small images as links to twitter, facebook, etc. I have a callout image that I would like to appear when I mouse over the image.
The key here is that the callout image not interfere with the other images and text on the page.
Is there a handy solution that would meet this need?
Have you tried MooTools? They have a lot of Javascript utilities that might meet your requirements.
Old skool:
Combine the images into one and then use a client side imagemap with onmouseover events which make the appropriate divs visible.
New skool:
Use CSS hover psuedo class. Good example here: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ (won't work in all browsers)
not positive but it sounds like u can just assign the background image and use the background-position property to show the appropriate image during hover and non-hover state
a.twitter { display: block; width: 16px; height: 16px;
background: url(/images/twitter-hover.png) no-repeat 0 0; }
a.twitter:hover { background-position: 0 16px }
that's assuming a 16x32 sprite comprised of two 16x16 buttons (non-hover and hover) stacked vertically.
this is a rudimentary example http://www.dynamicsitesolutions.com/css/background-image-switching/