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; }