Difference between IMAGE MAPS and CSS SPRITES

I could not find a clear difference between IMAGE MAPS and CSS SPRITES. Both look like a combination of images on a page in one? Thus, we can reduce the number of requests to the server. So what is the real difference?

+6
source share
4 answers

Image Card:

One image per page, with different areas that you can click on, and which then have different effects (for example, launching various links).

Here is a description of this here: http://www.javascriptkit.com/howto/imagemap.shtml

CSS Sprites :

Combining images behind several css classes into a single file to improve performance - for example, reducing the number of requests and often the total download size.

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

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

+7
source

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

CSS Sprite is a single image consisting of several images that you use for CSS background positioning to display this reduction in HTTP requests.

+1
source

An image map is the definition of coordinates that lie above an image in order to respond to events in these areas.

A css sprite is two or more images combined in one image.

0
source

I know that they asked him a year ago, just let me try to explain my own words.

CSS Sprite is like a repository with a single file file, which you can extract any part from it using css and place them separately in an arbitrary area on your web page, and the image map (in url), as the name implies, is an image, which has a clickable area that maps to your destination URL.

0
source

Source: https://habr.com/ru/post/925313/


All Articles