HTML-<area> Tag

Definition und Verwendung

<area> Tag definiert die Bereiche innerhalb der Bildkarte (eine Bildkarte ist ein Bild mit klickbaren Bereichen, auch Client-Sektionsantwortskarte).

<area> Element ist immer in <map> Tagim Innern.

Hinweis:<img> in usemap Attribut mit <map> Element des name AttributVerknüpft, erstellt eine Verbindung zwischen Bild und Karte.

Siehe auch:

HTML DOM Referenzhandbuch:Area-Objekt

Beispiel

Beispiel 1

Abbildung mit klickbarem Bereich:

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

亲自试一试

Beispiel 2

Eine andere Abbildung mit einem klickbaren Bereich:

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

亲自试一试

属性

属性 值 描述
alt 文本 规定区域的替代文本。如果存在 href 属性则为必需。
coords 坐标值 规定区域的坐标。
download 文件名 规定当用户单击超链接时将下载目标。
href URL 规定区域的超链接目标。
hreflang 语言代码 规定目标 URL 的语言。
media 媒体查询 规定目标 URL 优化的媒体/设备。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 规定要与链接一起发送的引用信息。
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 规定当前文档和目标 URL 之间的关系。
shape
  • default
  • rect
  • circle
  • poly
 规定区域的形状。
target
  • _blank
  • _parent
  • _self
  • _top
  • 框架名称
 规定在何处打开目标 URL。
type 媒体类型 规定目标 URL 的媒体类型。

全局属性

<area> 标签还支持 HTML 中的全局属性。

事件属性

<area> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <area> Element:

area {
  display: none;
{}

Browserunterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung