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?

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/

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.