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:
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 panjangcircle- mendefinisikan daerah melingkarpoly- mendefinisikan wilayah poligonaldefault- 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:
Koordinat 270,350terletak 270 piksel dari margin kiri dan 350 piksel dari atas:
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":
Bentuk = "lingkaran"
Untuk menambahkan luas lingkaran, pertama cari koordinat pusat lingkaran:
337,300
Kemudian tentukan jari-jari lingkaran:
44piksel
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":
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?
Kita harus mencari koordinat x dan y untuk semua tepi croissant:
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":
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 .