Difference between IMAGE MAPS and CSS SPRITES

Question

I could not find the clear difference between IMAGE MAPS and CSS SPRITES. Both are looking like combining the images in the page into one? So we can reduce multiple requests to the server. So what is the real difference?

Tyratyrannical

Answer 1

Image Map:

A single image in a page, with different areas you can click on, which then have different effects (eg launching different links).

There's a description of this here: http://www.javascriptkit.com/howto/imagemap.shtml

CSS Sprites:

Combining the images behind a number of css classes into a single file to improve performance - eg reducing number of requests and often overall download size.

For example you might combine various border elements of a colorbox dialog into a single image, or combine the clicked and unclicked images for a button.

The best description I've found of CSS sprites is this one: http://css-tricks.com/css-sprites/

Telemeter

Answer 2

An image map is one image that you can turn into an image map and place multiple links on top of the image.

A CSS sprite is one image made up of mutiple images that youy use CSS background positioning to display this reducing http requests.

Cianca

Answer 3

An Image Map is the definition of coordinates that are lying over the image to be able to react to events on this areas.

a css sprite are two or more images joint in one image.

Washday

Answer 4

I know it been asked a year ago, just let me try to explain in own my words.

CSS Sprite is like a single file image repository that you can pull out any portion of it via css and place them individually in arbitrary area in your webpage real estate, while image map (to-url) , as it name suggest is a image that has a clickable area that maps to your target url.

Czarism