Tanda <area> HTML

Definisi dan penggunaan

<area> tag yang mendefinisikan area di dalam peta gambar (peta gambar adalah gambar yang memiliki area yang dapat diklik, yaitu peta responsif klien).

<area> elemen selalu diselubungi di dalam Tag <map>dalamnya.

Perhatian:Elemen <img> pada atribut usemap dengan Elemen <map> dari Atribut nameTerhubung, membuat hubungan antara gambar dan peta.

Silakan lihat:

Panduan Referensi HTML DOM:Objek Area

Contoh

Contoh 1

Peta gambar dengan area yang dapat diklik:

<img src="life.png" alt="Kehidupan" 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="Kopi" href="coffee.html">
</map>

Coba sendiri

Contoh 2

Gambar lain yang memiliki area yang dapat diklik:

<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. Diperlukan jika atribut href ada.
coords Nilai koordinat Menentukan koordinat area.
download Nama berkas Menentukan apabila pengguna mengklik tautan, target akan diunduh.
href URL Menentukan tujuan tautan area.
hreflang Kode bahasa Menentukan bahasa URL tujuan.
media Pencarian media Menentukan media/perangkat yang dioptimalisir 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 bersamaan dengan tautan.
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 Tipe media Menentukan tipe media URL tujuan.

Atribut global

<area> Tag mendukung Atribut global di HTML。

Atribut acara

<area> Tag mendukung Atribut acara di HTML。

Pengaturan CSS standar

Sebagian besar peramban akan menampilkan nilai standar berikut <area> Elemen:

area {
  display: none;
{}

Dukungan browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan