Comments on: MouseOver Images Using CSS Sprites

By: Jeff`

Jeff` — Tue, 14 Dec 2010 00:12:26 +0000

Thank you for this. I was able to get it going on my site http://elka.dappledgrey.com but because there are three different images lined up (social media icons top right) I had to give each its own DIV and then use your code on each of the three DIVs. The hover portion I only had to include once.

By: Dave

Dave — Tue, 11 Mar 2008 15:17:45 +0000

Hi Alan, Do you mean that you’ve had problems with this method? If so, could you provide me with a link and I’ll be happy to take a look.

Personally, I prefer not to use JavaScript unless completely neccesary and never for critical functionality unless there’s a fall back so I prefer to use the sliding method.

It has another advantage in that using CSS sprites can reduce the filesize over saving each image individually.

By: Alan

Alan — Tue, 11 Mar 2008 15:10:31 +0000

Dave,

About the flicker when using background-image swapping. I have of course encountered the issue before. Oddly enough I have encountered a similar issue in IE when using this “sliding doors” method. For some reason, even though it was one actual image just being shifted on hover, IE6 would flicker out on me as if it was trying to reload the image and then slide it over. It didn’t happen all the time but I found a little piece of script that seems to cure the issue.

—

function fixIE6flicker(fix) {
try {
document.execCommand("BackgroundImageCache", false, fix);
} catch(err) { }
}
fixIE6flicker(true);

—

It might also fix the issue with actually swapping the images instead of sliding them.

By: Dave

Dave — Tue, 11 Mar 2008 14:19:06 +0000

Hi Jack, Do you mean something like this…

http://www.dave-woods.co.uk/?p=202

If not, do you have an example online anywhere of something like what you’re trying to achieve?

By: jackyboy

jackyboy — Mon, 10 Mar 2008 18:30:05 +0000

This is ok, but i have a list of names and would like to have mouse roll over a name and picture pop up on side of name (in space i have saved for the pictures to show) also need to be able to click on name and go to another page. Name should not be a link. is this possible? Where would i find such a effect – how would i do it?

By: dr john

dr john — Fri, 15 Feb 2008 14:14:05 +0000

One alternative if you use an unordered list for your menu is to use a different image (and colour) as the background for the list item and for the a:link. Then for a:hover, you simply apply no image to the link and a transparent background – no colour, so the image/colour shows through. Or if it is in a div with a background image, that can show through instead, removing the need for a background image for the list item. Or even a background image for the div, and a colour for the link, going to transparent on hover – see this example
http://www.sky-web.net/taggartandwright/index.htm

By: Dave

Dave — Thu, 14 Feb 2008 08:24:42 +0000

Hi duryodhan,

Yes it would work but you’ll also find that the hover image only loads once it’s actually requested and therefore you get a blank gap displayed while the second image loads.

You should also notice that the two images combined can usually be slightly smaller in file size so it also has that benefit along with fewer http requests so you can significantly speed up your site.

Hope that helps.

By: duryodhan

duryodhan — Thu, 14 Feb 2008 03:27:40 +0000

Wouldn’t just changing the background-image work too ?

By: Jermayn Parker

Jermayn Parker — Thu, 14 Feb 2008 01:05:56 +0000

Yeah that is easier and neater than using JavaScribble…

Im after something similar as this for an existing project, so ta for feeding me some ideas