Panduan Lengkap Image Map di HTML: Membuat Gambar Interaktif dengan Area Klik

Panduan Lengkap Image Map di HTML: Membuat Gambar Interaktif dengan Area Klik

Apa Itu Image Map?

Image Map adalah teknik di HTML yang memungkinkan kita membuat area tertentu dalam sebuah gambar menjadi interaktif (dapat diklik). Dengan Image Map, kita bisa membuat satu gambar memiliki beberapa bagian yang bisa diklik dan masing-masing mengarah ke link atau fungsi berbeda, tanpa harus memotong gambar menjadi beberapa bagian.

Contoh penggunaan: peta wilayah, diagram produk, atau menu bergambar.

Struktur Dasar Image Map

Untuk membuat Image Map, kita menggunakan elemen HTML berikut:

1. <img> — untuk menampilkan gambar.
2. usemap — atribut pada <img> yang merujuk pada <map>.
3. <map> — berisi area yang dapat diklik.
4. <area> — mendefinisikan area yang bisa diklik (bentuk dan tautannya).

Contoh Dasar Image Map

html

CopyEdit

<img src=”peta-indonesia.jpg” alt=”Peta Indonesia” usemap=”#petaindonesia” width=”500″>

<map name=”petaindonesia”>

  <area shape=”rect” coords=”34,44,270,350″ alt=”Jakarta” href=”jakarta.html”>

  <area shape=”circle” coords=”300,150,40″ alt=”Surabaya” href=”surabaya.html”>

  <area shape=”poly” coords=”200,60,220,80,210,100,190,90″ alt=”Bali” href=”bali.html”>

</map>

Penjelasan Atribut <area>

Jenis-Jenis Shape

1. rect (persegi panjang)
   Format: coords=”x1,y1,x2,y2″
   Contoh: coords=”34,44,270,350″
2. circle (lingkaran)
   Format: coords=”x,y,radius”
   Contoh: coords=”300,150,40″
3. poly (poligon)
   Format: coords=”x1,y1,x2,y2,x3,y3,…,xn,yn”
   Contoh: coords=”200,60,220,80,210,100,190,90″

Studi Kasus: Menu Interaktif dengan Gambar

Misalkan kamu memiliki gambar menu dengan 3 bagian: Home, Produk, dan Kontak. Gambar hanya satu, tapi kamu ingin setiap bagian bisa diklik.

html

CopyEdit

<img src=”menu.png” usemap=”#menuweb” width=”600″ alt=”Menu Web”>

<map name=”menuweb”>

  <area shape=”rect” coords=”0,0,200,100″ href=”index.html” alt=”Home”>

  <area shape=”rect” coords=”200,0,400,100″ href=”produk.html” alt=”Produk”>

  <area shape=”rect” coords=”400,0,600,100″ href=”kontak.html” alt=”Kontak”>

</map>

Tips Membuat Image Map yang Presisi

1. Gunakan alat bantu koordinat:
   Tools seperti Image-Map.net bisa membantu kamu menentukan titik koordinat lebih mudah.
2. Gunakan gambar berukuran tetap agar area tidak bergeser saat diakses dari berbagai perangkat.
3. Uji klik area secara menyeluruh agar tidak ada bagian yang salah sasaran.

Kelebihan dan Kekurangan

Kelebihan

• Hanya perlu 1 gambar untuk banyak tautan.
• Cepat dan mudah dibuat.

Kekurangan

• Tidak responsif secara default.
• Perlu ketelitian dalam menentukan koordinat.
• Kurang ramah mobile tanpa CSS tambahan.

Kesimpulan

Image Map di HTML adalah fitur klasik namun sangat berguna untuk membuat gambar menjadi interaktif. Dengan bantuan <map> dan <area>, kamu bisa memberikan pengalaman pengguna yang lebih menarik, terutama untuk peta, menu visual, atau infografis interaktif.

Jika digunakan dengan tepat dan presisi, Image Map bisa menjadi solusi yang efisien dalam desain web.

Gambar Pendukung:

Di Era Digital, Keterampilan Komputer bukan pilihan, tapi kebutuhan
.
KUASAI ILMU KOMPUTER ATAU TERTINGGAL !!!
.
Jangan lupa belajar komputer biar ga GAPTEK dan bisa bersaing di era DIGITAL
.
Saat ini, penguasaan ilmu komputer sangat bermanfaat untuk menunjang karir dan pekerjaaanmu
.
Yuk Belajar Komputer di Kursus Komputer Privat YMII Cileungsi
.
Bisa Online atau Offline
.
1 Pengajar 1 Peserta (Privat)
.
Ada Potongan DISKON untuk YATIM
.
Info lebih lanjut hubungi:

• 0858 8188 5768 (Sutrisno)
  .
  wa: wa.me/6285881885768
  .
  Lokasi:
  Rumah Belajar Komputer Privat YMII Harvest City
  Perum Harvest City Cluster Bromelia B9 No 12 Cileungsi Bogor
  .