Peta Gambar HTML


Dengan peta gambar HTML, Anda dapat membuat area yang dapat diklik pada gambar.


Peta Gambar

Tag HTML <map>mendefinisikan peta gambar. Peta gambar adalah gambar dengan area yang dapat diklik. Area ditentukan dengan satu atau lebih <area>tag.

Coba klik pada komputer, ponsel, atau cangkir kopi pada gambar di bawah ini:

tempat kerja Sun Mercury Venus

Contoh

Berikut adalah kode sumber HTML untuk gambar peta di atas:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Bagaimana cara kerjanya?

Gagasan di balik peta gambar adalah bahwa Anda harus dapat melakukan tindakan yang berbeda tergantung di mana dalam gambar yang Anda klik.

Untuk membuat peta gambar, Anda memerlukan gambar, dan beberapa kode HTML yang menjelaskan area yang dapat diklik.



Foto

Gambar disisipkan menggunakan <img>tag. Satu-satunya perbedaan dari gambar lain adalah Anda harus menambahkan usemapatribut:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Nilai usemapdimulai dengan tag hash #diikuti dengan nama peta gambar, dan digunakan untuk membuat hubungan antara gambar dan peta gambar.

Tip: Anda dapat menggunakan gambar apa saja sebagai peta gambar!


Buat Peta Gambar

Kemudian, tambahkan <map>elemen.

Elemen <map>tersebut digunakan untuk membuat peta gambar, dan ditautkan ke gambar dengan menggunakan name atribut yang diperlukan:

<map name="workmap">

Atribut nameharus memiliki nilai yang sama dengan <img>atribut usemap.


Area

Kemudian, tambahkan area yang dapat diklik.

Area yang dapat diklik didefinisikan menggunakan <area>elemen.

Membentuk

Anda harus menentukan bentuk area yang dapat diklik, dan Anda dapat memilih salah satu dari nilai berikut:

  • rect - mendefinisikan daerah persegi panjang
  • circle - mendefinisikan daerah melingkar
  • poly - mendefinisikan wilayah poligonal
  • default - mendefinisikan seluruh wilayah

Anda juga harus menentukan beberapa koordinat untuk dapat menempatkan area yang dapat diklik ke dalam gambar. 


Bentuk = "persegi"

Koordinat untuk shape="rect"datang berpasangan, satu untuk sumbu x dan satu untuk sumbu y.

Jadi, koordinatnya 34,44terletak 34 piksel dari margin kiri dan 44 piksel dari atas:

tempat kerja

Koordinat 270,350terletak 270 piksel dari margin kiri dan 350 piksel dari atas:

tempat kerja

Sekarang kita memiliki cukup data untuk membuat area persegi panjang yang dapat diklik:

Contoh

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Ini adalah area yang dapat diklik dan akan mengirim pengguna ke halaman "computer.htm":

tempat kerja

Bentuk = "lingkaran"

Untuk menambahkan luas lingkaran, pertama cari koordinat pusat lingkaran:

337,300

tempat kerja

Kemudian tentukan jari-jari lingkaran:

44piksel

tempat kerja

Sekarang Anda memiliki cukup data untuk membuat area melingkar yang dapat diklik:

Contoh

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Ini adalah area yang dapat diklik dan akan mengirim pengguna ke halaman "coffee.htm":

tempat kerja

Bentuk = "poli"

Ini shape="poly"berisi beberapa titik koordinat, yang menciptakan bentuk yang dibentuk dengan garis lurus (poligon).

Ini dapat digunakan untuk membuat bentuk apa pun.

Seperti mungkin bentuk croissant!

Bagaimana caranya agar croissant pada gambar di bawah ini menjadi link yang bisa diklik?

Makanan Perancis

Kita harus mencari koordinat x dan y untuk semua tepi croissant:

Makanan Perancis

Koordinat datang berpasangan, satu untuk sumbu x dan satu untuk sumbu y:

Contoh

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

Ini adalah area yang dapat diklik dan akan mengarahkan pengguna ke halaman "croissant.htm":

Makanan Perancis

Peta Gambar dan JavaScript

Area yang dapat diklik juga dapat memicu fungsi JavaScript.

Tambahkan clickacara ke <area>elemen untuk menjalankan fungsi JavaScript:

Contoh

Di sini, kami menggunakan atribut onclick untuk menjalankan fungsi JavaScript saat area diklik:

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

Ringkasan Bab

  • Gunakan elemen HTML <map>untuk mendefinisikan peta gambar
  • Gunakan elemen HTML <area>untuk menentukan area yang dapat diklik di peta gambar
  • usemapGunakan atribut HTML <img>elemen untuk menunjuk ke peta gambar

Tag Gambar HTML

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .