Looking for a good image mouse over solution

Question

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?

Answer 1

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)

Answer 2

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/

Answer 3

Have you tried MooTools? They have a lot of Javascript utilities that might meet your requirements.