Lo pernah lihat gambar yang bisa diklik di beberapa titik dan ngarahin ke halaman yang berbeda? Itu bukan sihir, bro! Itu namanya HTML Image Map. Fitur ini bikin satu gambar punya banyak area klik tanpa harus dipotong-potong.
Di artikel ini, gue bakal jelasin tag dan atribut penting buat bikin HTML Image Map, lengkap sama contoh kodenya. Let’s go!
1. Tag <img>: Menampilkan Gambar di HTML
Oke, pertama-tama, lo butuh gambar buat dijadiin image map. Gunakan tag <img> buat nampilin gambar di HTML.
Contoh:
<img src="peta-indonesia.jpg" alt="Peta Interaktif" usemap="#peta">
Penjelasan:
✔ src="peta-indonesia.jpg" → Nentuin gambar yang dipakai.
✔ alt="Peta Interaktif" → Teks alternatif buat SEO & aksesibilitas.
✔ usemap="#peta" → Ngasih tahu kalau gambar ini punya image map dengan nama "peta".
2. Tag <map>: Bikin Peta Klik di Gambar
Setelah punya gambar, lo harus bikin peta kliknya. Caranya pakai tag <map>, yang berisi area-area bisa diklik.
Contoh:
<map name="peta">
<area shape="rect" coords="50,50,150,150" href="https://jakarta.com" alt="Jakarta">
<area shape="circle" coords="200,200,50" href="https://bandung.com" alt="Bandung">
</map>
Penjelasan:
✔ <map name="peta"> → Harus sama dengan usemap="#peta" di tag <img>.
✔ Di dalamnya ada <area>, yang menentukan bagian-bagian gambar yang bisa diklik.
3. Tag <area>: Tentuin Area yang Bisa Diklik
Tag <area> dipakai buat nentuin titik-titik klik di gambar. Ada beberapa atribut penting dalam tag ini:
✔ shape="..." → Bentuk area klik.
✔ coords="..." → Koordinat area klik (tergantung shape).
✔ href="..." → Link tujuan pas diklik.
✔ alt="..." → Deskripsi buat SEO & aksesibilitas.
Contoh:
<area shape="rect" coords="50,50,150,150" href="https://jakarta.com" alt="Jakarta">
4. Atribut usemap: Hubungin Gambar Sama <map>
Di tag <img>, kita pakai atribut usemap buat ngasih tahu bahwa gambar ini punya peta klik.
Formatnya:
<img src="peta-indonesia.jpg" usemap="#peta">
✔ Nama di usemap HARUS sama dengan name di tag <map>.
✔ Tanda # wajib di usemap="#peta".
5. Atribut shape: Tentuin Bentuk Area Klik
Atribut shape dipakai buat nentuin bentuk area yang bisa diklik. Ada beberapa opsi:
1️⃣ rect (Persegi / Kotak)
- Pakai 4 koordinat:
x1, y1, x2, y2. x1, y1= titik kiri atas.x2, y2= titik kanan bawah.
Contoh:
<area shape="rect" coords="50,50,150,150" href="https://jakarta.com" alt="Jakarta">
2️⃣ circle (Lingkaran)
- Pakai 3 angka:
x, y, radius. x, y= titik tengah.radius= jari-jari lingkaran.
Contoh:
<area shape="circle" coords="200,200,50" href="https://bandung.com" alt="Bandung">
3️⃣ poly (Poligon / Bentuk Bebas)
- Pakai banyak koordinat (minimal 3 titik).
- Bisa dipakai buat segitiga, bintang, atau bentuk unik lainnya.
Contoh:
<area shape="poly" coords="300,100,350,150,400,100,350,50" href="https://bali.com" alt="Bali">
Contoh Lengkap HTML Image Map
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peta Interaktif Indonesia</title>
</head>
<body>
<h1>Jelajahi Indonesia!</h1>
<img src="peta-indonesia.jpg" alt="Peta Indonesia" usemap="#peta">
<map name="peta">
<area shape="rect" coords="50,50,150,150" href="https://jakarta.com" alt="Jakarta" title="Klik untuk info Jakarta">
<area shape="circle" coords="200,200,50" href="https://bandung.com" alt="Bandung" title="Klik untuk info Bandung">
<area shape="poly" coords="300,100,350,150,400,100,350,50" href="https://bali.com" alt="Bali" title="Klik untuk info Bali">
</map>
</body>
</html>
Hasilnya akan terlihat seperti di bawah, dan apabila kita menekan salah satu titik lokasi, kita akan di pindahkan ke sebuah situs web.
Kesimpulan
✨ Tag <img> → Menampilkan gambar dan menghubungkannya ke image map dengan usemap.
✨ Tag <map> → Menentukan peta klik dengan beberapa area interaktif.
✨ Tag <area> → Menentukan area klik dengan shape, coords, dan href.
✨ Atribut usemap → Menghubungkan gambar dengan peta klik.
✨ Atribut shape → Menentukan bentuk area yang bisa diklik (rect, circle, atau poly).
Sekarang lo udah ngerti dasar-dasar HTML Image Map, gaskeun buat coba di website lo! Kalau ada pertanyaan, komen aja di bawah!
Komentar