The image-map feature uses @image-map at-rule to define the map itself and the image-map() function that is used in place of url(...) in places where image url is accepted.
The @image-map rule consists of of the keyword "@image-map", followed by an identifier giving a name for the image map (which will be referenced in image-map(name, ...) function):
@image-map <name> {
src: <sources-list>;
cells: <columns> <rows>;
items: <items-list>;
}
Where:
url() NNdpi pairs like: url(x1.png) 100dpi, url(x2.png) 200dpi, url(jumbo.png). <name> - just a section name, this name will be assigned to the next cell in sequence. Cells are columns-then-rows ordered, first cell (leftmost in first row) has number 1.<name> <number> - section name and cell number (positive integer from 1 to total number of cells). Next number in sequece will be set to next cell.<name> <column:number> <row:number> - section name assigned to cell at column/row location. Next number in sequece will be set to next cell.<name> <column:number> <row:number> <columns:number> <rows:number> - section name assigned to rectangular range of cells starting at column/row location and spanning that number of columns and rows. Next number in sequece will not change.Cells and items properties are optional in @image-map declaration, if they omitted then such image map can be used only as a whole.
The image-map() function defines image section "point of use" and can be used in all places in CSS where image is expected.
There are two forms of image-map function usage:
image-map(<image-map:name>) - use one of images declared in @image-map src property according to current screen DPI settings.image-map(<image-map:name>, <item:name>) - use named item from the image map as an image.If there is no such image-map or it does not contain such item name nothing is rendered.
The image-map declaration:
@image-map toolbar-icons
{
src:url(rttb.png);
cells:15 2; /* 15 columns, 2 rows */
/* logical names of the parts, see toolbar-icons.png */
items: ulist, olist, unindent, indent, picture, table, link;
}
And its use:
.toolbar > button.ulist { background-image:image-map(toolbar-icons,ulist); }
.toolbar > button.olist { background-image:image-map(toolbar-icons,olist); }
.toolbar > button.unindent { background-image:image-map(toolbar-icons,unindent); }
.toolbar > button.indent { background-image:image-map(toolbar-icons,indent); }
.toolbar > button.picture { background-image:image-map(toolbar-icons,picture); }
.toolbar > button.table { background-image:image-map(toolbar-icons,table); }
Image map that uses star-1x.png for DPIs less or equal 100
@image-map dpi-aware {
src: url(star-1x.png) 100dpi,
url(star-2x.png) ;
}
And its use:
#star {
size:180px;
background: no-repeat 50% 50% image-map(dpi-aware); /* either star-1x.png or star-2x.png */
border:1px solid;
}