Tag ng HTML <area>

Definasyon at Gagamit

<area> Tag na naglalarawan ng mga area sa loob ng map (ang map ay imahe na may klikable na area, o kaya ay partition response map sa client).

<area> Ang elemento ay palagian na nakakabit sa Tag na <map>Sa loob ng.

Bilin:Elementong <img> sa Atributo ng usemap at Elementong <map> ng Atributo ng nameKasali ang paglikha ng ugnayan sa pagitan ng imahe at ng map:

Mga ibang basahin:

HTML DOM Reference Manual:Objeto ng Area

Mga katulad

Halimbawa 1

Isang imahe na may klikable na area:

<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

Halimbawa 2

Isang ibang imahe na may klikable na area:

<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 what will be downloaded when the user clicks on the hyperlink.
href URL Specify the hyperlink target of the area.
hreflang Language code Specify the language of the target URL.
media Media queries 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

Most browsers will display the following default values <area> องค์ประกอบ：

area {
  display: none;
}

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน