Looking for a good mouse picture

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 display when I hover over the image.

The key here is that the callout image does not interfere with other images and text on the page.

Is there a convenient solution to meet this need?


source to share

3 answers

Old skool:

Concatenate the images into one and then use a client side map with onmouseover events that make the corresponding divs visible.

New task:

Use the 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 looks like u can just assign a background image and use the background-position property to display the corresponding 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 }


assuming a 16x32 sprite consists of two 16x16 buttons (no hover and no hover) arranged vertically.

this is a rudimentary example http://www.dynamicsitesolutions.com/css/background-image-switching/



Have you tried MooTools ? They have a lot of Javascript utilities that can fit your needs.



All Articles