Restrict area of hover for css rollover

Question

I have an image with 5 logo's and I'd like each logo to change individually from greyscale to color on hover. The obvious solution is to chop the image into the separate logo's with each having both a greyscale and color version and then do a standard css rollover.

However, I can't increase the page load with 5 additional image hits. Is it possible to do this using jquery and one large sprite with all 5 logo's in both greyscale and color and somehow detect which area of the image is being hovered over so the associated color version can then be shown?

Answer 1

You don't want to fiddle with cursor location if you can avoid it. Actually, what you probably want to do is create a CSS sprite - it's one image file that contains all 10 logos (5 color, 5 greyscale). That way, the browser only has to load one image. Then, using CSS, you display pieaces of that image as the background image for your various elements, and vary which piece is displayed using the :hover pseudoclass.

This page will get you started: http://www.w3schools.com/css/css_image_sprites.asp

And I like to use this page to create sprites and the CSS that goes with it. http://spritegen.website-performance.org/

Note that this is a somewhat difficult technique to get working the first time, but it saves lots of time and bandwidth in the long run.