HTML CSS examples for HTML Tag:area
The media attribute specifies what media/device the target URL is optimized for, such as iPhone , speech or print media.
This attribute can accept several values.
Value | Description |
---|---|
and | Specifies an AND operator |
not | Specifies a NOT operator |
, | Specifies an OR operator |
Value | Description |
---|---|
all | Default. Suitable for all devices |
aural | Speech synthesizers |
braille | Braille feedback devices |
handheld | Handheld devices |
projection | Projectors |
Print preview mode/printed pages | |
screen | Computer screens |
tty | Teletypes and similar media using a fixed-pitch character grid |
tv | Television type devices |
Value | Description |
---|---|
width | width of the area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
height | height of the?area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
device-width | width of the area. "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
device-height | height of the area. "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
orientation | orientation. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
aspect-ratio | width/height ratio. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio | device-width/device-height ratio. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
color | bits per color of target display. "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
color-index | number of colors the display can handle. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)" |
monochrome | bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
resolution | pixel density (dpi or dpcm). "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)" |
scan | scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
grid | if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)" |
An image-map, with a clickable area:
<!DOCTYPE html> <html> <body> <p>Click on the sun to watch it closer:</p> <img src="https://www.java2s.com/style/demo/Opera.png" width="145" height="126" alt="message" usemap="#myMap"> <map name="myMap"> <area shape="rect" coords="0,0,80,100" alt="A" href="" media="screen and (min-color-index:256)"> </map><!--from w w w.jav a 2s . c o m--> </body> </html>