Kodeloka
  1. Kodeloka
  2. Kelas HTML
  3. Materi

2 · Media & Tabel · Modul 11 dari 27

Peta Gambar (map & area) dan Elemen Penyematan (object, embed)

Membuat wilayah klik interaktif di atas gambar menggunakan <map> dan <area>, alternatif modern berbasis SVG interaktif, serta kapan menggunakan <object> untuk menyematkan dokumen PDF dengan konten cadangan.

Praktik dan kuis di kelas interaktif →

1. Peta Gambar Klasik (<map> dan <area>) vs Alternatif SVG Modern

HTML menyediakan elemen <map> dan <area> untuk mendefinisikan beberapa wilayah klik (clickable hotspots) berbentuk persegi panjang (shape="rect"), lingkaran (shape="circle"), atau poligon (shape="poly") di atas satu elemen <img usemap="#nama-peta">:

<img
  src="/assets/topologi-jaringan.png"
  alt="Topologi jaringan dengan Router di kiri dan Server Database di kanan"
  width="600"
  height="300"
  usemap="#peta-topologi"
>

<map name="peta-topologi">
  <!-- Wilayah klik persegi panjang: x1, y1, x2, y2 -->
  <area
    shape="rect"
    coords="20,50,180,250"
    href="/materi/jaringan-router"
    alt="Pelajari konfigurasi Router Gateway"
  >
  <!-- Wilayah klik lingkaran: pusat-x, pusat-y, jari-jari -->
  <area
    shape="circle"
    coords="450,150,80"
    href="/materi/database-server"
    alt="Pelajari replikasi Server Database"
  >
</map>
⚠️ Kelemahan <map> / <area> pada Desain Responsif Modern

Koordinat piksel di dalam atribut coords="20,50,180,250" bersifat statis (tidak otomatis ikut menyusut saat gambar <img> mengecil di layar ponsel)! Solusi Modern Terbaik: Untuk diagram interaktif atau peta wilayah yang harus 100% responsif di semua ukuran layar, gunakan <svg viewBox="..."> inline yang membungkus <a href="..."> di sekitar elemen <rect> atau <path>, karena koordinat di dalam viewBox SVG otomatis berskala secara proporsional!

<!-- Alternatif Modern yang 100% Responsif dengan SVG Inline -->
<svg viewBox="0 0 600 300" role="group" aria-label="Diagram Topologi Interaktif">
  <a href="/materi/jaringan-router" aria-label="Pelajari konfigurasi Router Gateway">
    <rect x="20" y="50" width="160" height="200" rx="12" fill="#dbeafe" stroke="#2563eb" />
    <text x="100" y="155" text-anchor="middle" fill="#1e3a8a">Router Gateway</text>
  </a>
</svg>

2. Menyematkan Dokumen PDF dengan <object> dan Konten Fallback

Jika Anda ingin menampilkan pratinjau dokumen PDF langsung di dalam halaman, elemen <object> memiliki satu keunggulan besar dibandingkan <iframe>:

  • Di dalam <object data="panduan.pdf" type="application/pdf"> ... </object>, Anda dapat menuliskan **konten HTML cadangan (fallback)** di antara tag pembuka dan penutupnya! Jika peramban pengguna (misalnya di beberapa perangkat seluler) tidak memiliki pembaca PDF tersemat, peramban otomatis menampilkan tautan unduhan di dalamnya:
<object
  data="/assets/cheatsheet-linux.pdf"
  type="application/pdf"
  width="800"
  height="600"
  style="width: 100%;"
  aria-label="Pratinjau Lembar Contekan Perintah Linux"
>
  <p>
    Peramban Anda tidak mendukung tampilan PDF langsung di halaman ini.
    Silakan <a href="/assets/cheatsheet-linux.pdf" download>unduh berkas PDF (350 KB)</a>
    untuk membacanya.
  </p>
</object>

Latihan Praktik: Diagram Arsitektur Interaktif dan Penyematan Dokumen

Buatlah berkas peta-dan-objek.html:

  1. Buat satu gambar dengan <map> dan <area> lengkap dengan atribut alt pada setiap <area>.
  2. Buat versi modernnya menggunakan <svg viewBox="0 0 500 200"> yang memiliki dua area tautan <a> interaktif.
  3. Tambahkan elemen <object type="application/pdf"> lengkap dengan paragraf fallback unduhan.
📚 Rujukan