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
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)
source to share
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/
source to share