area media Attribute - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:area

Description

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.

Possible Operators

Value Description
and Specifies an AND operator
not Specifies a NOT operator
, Specifies an OR operator

Devices

Value Description
allDefault. Suitable for all devices
aural Speech synthesizers
brailleBraille feedback devices
handheld Handheld devices
projection Projectors
print Print preview mode/printed pages
screen Computer screens
ttyTeletypes and similar media using a fixed-pitch character grid
tv Television type devices

Values

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-widthwidth 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-ratiowidth/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)"
scanscanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)"
gridif 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:

Demo Code

ResultView the demo in separate window

<!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>

Related Tutorials