Tanda <map> HTML

Definisi dan Penggunaan

<map> tag untuk mendefinikan peta citra. Peta citra (image map, jenis peta navigasi yang dipartisi) adalah gambar yang memiliki area yang dapat diklik.

<map> elemen memerlukan atribut namedengan elemen <img> dari Atribut usemap berhubungan, untuk menciptakan hubungan antara gambar dan peta.

<map> elemen yang berisi beberapa Elemen <area>，mendefinikan area yang dapat diklik dalam peta citra.

Lihat pula:

Panduan HTML DOM:Objek Map

Contoh

Contoh 1

Gambar peta citra dengan area yang dapat diklik:

<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

Gambar peta citra yang lain dengan 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
name Nama Peta Diperlukan. Menentukan nama peta gambar.

Atribut Global

<map> Tanda masih mendukung Atribut Global dalam HTML.

Atribut Acara

<map> Tanda masih mendukung Atribut Acara dalam HTML.

Pengaturan CSS Default

Sebagian besar peramban akan menampilkan dengan nilai default berikut: <map> Elemen:

map {
  display: inline;
}

Dukungan Peramban

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