CSS Sprites and Image Mapping

I am trying to embed CSS Sprited css classes into an image map. Initially, I created an HTML image map that loaded 8 pictures:

A square image with 7 buttons = All grey when not hovered over. 7 square images each with one button with color for the hover over.

This was causing loading issues with the images since the images wouldn't load until someone hovered over, causing a brief delay in the hover over image appearing for the user.

I was checking out CSS Sprites and saw that this would be the most efficient way to accomplish a quick load time of all the buttons required.

So...i've got my CSS Sprite created however the image map seems to only allow me to call image files, not classes created for the sprite开发者_JAVA百科. How would I go about merging these two technologies to allow me to hover over each button and activate their respective color based on the CSS Sprite positioning.

Sorry if this sounds too wordy or too confusing. I've been trying to wrap my head around this for quite some time.

Should I just ditch the idea of 1 image in an image map with positioning and go with loading 7 images CSS Sprited?

So you're trying to get CSS sprites - background images with adjustable background positions - working with html <map> <area> elements? Tricky but possible.

DEMO on jsbin

This is tested in Firefox, Chrome, Opera and Safari (August 2013), plus Internet Explorer 7, 8, 9 and 10.

You basically just need an <img> with an invisible but valid src attribute that doesn't cause the browser to show its 'broken image' icon.

My preferred way is this, a 1px by 1px transparent gif, base64 encoded so no actual .gif file is needed:

src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIC‌​RAEAOw=="

There are a few other suggested methods at "What's the valid way to include an image with no src?" but all the others I tried had at least one issue. This just worked fine.

Then it's just the usual stuff:

• fixed height and width, ideally through css
• a background image with background position set, like in normal sprite images.
• a usemap attribute just like normal when making an image map (like usemap="#someArea" with a # if you want old IE support - as normal).
• normal <map> element with id corresponding to img's usemap, containing <area> elements

If your goal is to have multiple images with associated areas from different locations on the same sprite sheet, you might run into this problem: Overlapping images w/ image maps obstructing each other. The simple solution suggested there works well with image maps: assign your <map> to one completely transparent image as above but with no background image, keep it above all other images, then have the images as regular image sprites underneath.

You need to use the css hover modifier:

Somebutton {
  /* things needed to display the sprite */
  ...
  background-position: 0px -7px /* normal mode */
}

Somebutton:hover {
  /* things needed to display the sprite */
  ...
  background-position: 0px -56px /* shift the image
      49 pixels to the left to display color image. */
}