HTML-<area>-tagi

Määrittely ja käyttö

<area> tagi määrittelee kuvakartan alueet (kuvakartta on kuvakartta, jossa on klikattavia alueita, eli asiakaskeskeinen aluevastauskuva).

<area> elementti on aina sisällä <map>-tagis

Huomioitavaa:<img> s usemap-ominaisuus ja <map>-elementti n name-ominaisuusLiitetään yhteen, luodaan yhteys kuvan ja kartan välillä.

Katso myös:

HTML DOM -viittauskirja:Alue-objekti

Esimerkki

Esimerkki 1

Kuva, jossa on klikattavia alueita:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Try it yourself

Esimerkki 2

Toinen kuva, jossa on klikattavia alueita:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Try it yourself

Attribute

Attribute Value Description
Alt Text Specify the alternative text of the area. It is required if the href attribute exists.
Coords Coordinate values Specify the coordinates of the area.
Download Filename Specify the target to be downloaded when the user clicks the hyperlink.
Href URL Specify the hyperlink target of the area.
Hreflang Language code Specify the language of the target URL.
Media Media query Specify the media/device optimized for the target URL.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Specify the reference information to be sent with the link.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • Tag
 Specify the relationship between the current document and the target URL.
Shape
  • default
  • rect
  • circle
  • poly
 Specify the shape of the area.
Target
  • _blank
  • _parent
  • _self
  • _top
  • Frame name
 Specify where to open the target URL.
Type Media type Specify the media type of the target URL.

Global attributes

<area> Tags also support Global attributes in HTML.

Event attributes

<area> Tags also support Event attributes in HTML.

Default CSS settings

Use the following default values to display most browsers <area> Elementti：

area {
  display: none;
}

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki