Tanda <area> HTML

Definisi dan penggunaan

<area> tanda yang menentukan kawasan di dalam peta imej (peta imej adalah imej dengan kawasan klik, iaitu peta responsif kawasan klien).

<area> Elemen selalu diselubungi di dalam Tanda <map>dalamnya.

Perhatian:Elemen <img> dalam aturan usemap dengan Elemen <map> dari AturanBerkaitan, cipta hubungan antara imej dan peta

Lihat juga:

Panduan Referensi HTML DOM:Objek Area

Contoh

Contoh 1

Peta imej dengan kawasan klik

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

Coba sendiri

Contoh 2

Satu imej lain yang mempunyai kawasan klik

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

Coba sendiri

Atribut

Atribut Nilai Deskripsi
alt Teks Menentukan teks alternatif area. Wajib jika atribut href ada.
coords Nilai koordinat Menentukan koordinat area.
download Nama berkas Menentukan apabila pengguna mengklik hyperlink, target akan diunduh.
href URL Menentukan tujuan hyperlink area.
hreflang Kode bahasa Menentukan bahasa URL tujuan.
media Pencarian media Menentukan media/perangkat yang dioptimalisasikan URL tujuan.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Menentukan informasi referensi yang akan dikirim bersama link.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Menentukan hubungan dokumen saat ini dan URL tujuan.
shape
  • default
  • rect
  • circle
  • poly
 Menentukan bentuk area.
target
  • _blank
  • _parent
  • _self
  • _top
  • Nama kerangka
 Menentukan dimana URL tujuan akan dibuka.
type Jenis media Menentukan jenis media URL tujuan.

Atribut global

<area> Tag ini mendukung Atribut global dalam HTML。

Atribut peristiwa

<area> Tag ini mendukung Atribut peristiwa dalam HTML。

Pengaturan CSS baku

Banyak pelayar akan menunjukkan nilai baku berikut <area> 元素：

area {
  display: none;
{}

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持