Memahami TAG map HTML

TokoDaring.Com – Memahami TAG map HTML. Tag HTML <map> merupakan komponen penting untuk membuat peta gambar, tempat berbagai bagian gambar dapat dibuat interaktif dan dapat diklik. Tag ini bekerja bersama dengan tag <area> untuk menentukan wilayah dalam gambar yang berfungsi sebagai tautan atau pemicu tindakan.

Artikel Seri HTML Lainnya:

Tag <area> HTML: Menentukan area yang dapat diklik dalam peta gambar

Memahami TAG map HTML

Tulisan blog ini membahas fitur, penggunaan, dan manfaat tag <map>, dengan memberikan contoh praktis dan praktik terbaik untuk penerapannya. Sehingga anda dapat mengerti dan Memahami TAG map HTML sepenuhnya dengan benar.

Apa itu Tag <map>?

• Tag <map> digunakan untuk membuat peta gambar, yang memungkinkan pengembang menentukan wilayah yang dapat diklik dalam satu gambar. Wilayah ini dapat ditautkan ke URL yang berbeda, sehingga meningkatkan interaktivitas.
• Tag <map> bekerja bersama dengan tag <img>, dengan setiap wilayah ditentukan menggunakan tag <area>.
• Tag <map> sendiri berfungsi sebagai wadah untuk tag <area>, yang menentukan bagian gambar mana yang dapat diklik. Saat pengguna mengarahkan kursor atau mengklik area yang ditentukan ini, mereka akan diarahkan ke URL atau tindakan tertentu.

Dalam contoh ini, dua wilayah interaktif dibuat dalam gambar: satu persegi panjang dan satu melingkar.

<img src="image.jpg" usemap="#map1" alt="Image Map Example">
<map name="map1">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Region 1">
  <area shape="circle" coords="100,100,50" href="page2.html" alt="Region 2">
</map>

Cara Kerja Tag <map> dengan Tag <img>

Tag <map> tidak berfungsi sendiri, tetapi harus dikaitkan dengan gambar. Hal ini dicapai dengan menggunakan atribut usemap dalam tag <img>, yang menautkan gambar ke peta yang ditentukan dengan merujuk atribut name peta.

• Atribut usemap: Atribut ini menghubungkan gambar ke elemen <map>. Nilai usemap harus sesuai dengan atribut name dalam tag <map>, diawali dengan simbol #.
• Atribut name: Atribut name dalam tag <map> sangat penting karena atribut ini mengidentifikasi peta gambar dan memungkinkan tag <img> untuk menggunakannya.

Contoh, Dalam contoh ini, gambar example.jpg menggunakan peta gambar bernama mapExample untuk menentukan area poligonal yang dapat diklik:

<img src="example.jpg" usemap="#mapExample">
<map name="mapExample">
  <area shape="poly" coords="45,65,128,140,280,55" href="link1.html" alt="Polygon Area">
</map>

Atribut Tag <map>

Meskipun tag <map> sendiri tidak memiliki banyak atribut, tag ini memainkan peran penting dalam memuat elemen <area>. Kekuatan sebenarnya berasal dari atribut tag <area>, yang menentukan wilayah yang dapat diklik di dalam gambar.

• name: Ini adalah atribut terpenting untuk tag <map>. Atribut ini menetapkan pengenal unik ke peta gambar, yang dirujuk oleh atribut usemap di tag <img>.
• id: Meskipun opsional, atribut id dapat digunakan untuk tujuan skrip tambahan, sehingga memudahkan untuk merujuk peta di JavaScript.

Setiap <area> di dalam tag <map> dapat disesuaikan menggunakan atribut seperti shape, coords, href, dan alt, sehingga seluruh peta sangat dapat disesuaikan dan interaktif.

Kasus Penggunaan Interaktif untuk Tag <map>

Tag <map> dapat digunakan dalam berbagai skenario untuk meningkatkan keterlibatan pengguna. Fleksibilitasnya memungkinkannya diterapkan di berbagai bidang, mulai dari pemasaran hingga pendidikan.

• Peta Navigasi: Salah satu penggunaan paling umum untuk tag <map> adalah membuat peta geografis interaktif. Berbagai wilayah peta dapat ditautkan ke berbagai halaman atau memicu pop-up informasi, yang menyediakan cara interaktif bagi pengguna untuk menjelajahi data.
• Infografis: Infografis sering kali berisi beberapa titik data atau elemen. Dengan menggunakan peta gambar, setiap bagian infografis dapat dibuat dapat diklik, yang menautkan ke informasi atau sumber daya yang lebih terperinci.
• Pameran Produk: Situs web e-niaga dapat menggunakan tag <map> untuk menyorot berbagai bagian gambar produk. Misalnya, pada gambar mobil, mengklik berbagai area dapat mengarahkan pengguna ke halaman dengan detail tentang fitur tertentu, seperti interior atau mesin.

Praktik Terbaik untuk Menggunakan Tag <map>

Meskipun tag <map> merupakan alat yang ampuh untuk membuat gambar interaktif, ada beberapa praktik terbaik untuk memastikan peta gambar Anda berfungsi, mudah diakses, dan ramah pengguna.

• Desain Responsif: Peta gambar harus responsif untuk memastikan area yang dapat diklik menyesuaikan saat gambar diubah ukurannya. Ini bisa jadi sulit, tetapi solusi CSS dan JavaScript tersedia untuk membantu membuat peta gambar berfungsi di berbagai ukuran layar.
• Aksesibilitas: Selalu sertakan atribut alt yang deskriptif untuk setiap <area> di dalam peta. Ini memastikan bahwa pembaca layar dapat mengartikan wilayah yang dapat diklik, sehingga situs Anda lebih mudah diakses.
• Konten Cadangan: Karena tidak semua pengguna dapat berinteraksi dengan peta gambar (karena keterbatasan atau ketidakmampuan browser), penting untuk menyediakan tautan navigasi atau konten cadangan. Ini memastikan bahwa informasi penting tetap dapat diakses meskipun peta gambar tidak dapat digunakan.

Dengan mengikuti praktik ini, Anda dapat membuat peta gambar yang efisien, mudah diakses, dan menarik.

Artikel tutorial HTML lainnya, lihat kategori artikel Coding For Fun.

FAQ (Frequently Asked Question) atau Tanya Jawab Umum Tentang Memahami TAG map HTML

FAQ (Frequently Asked Question) atau Tanya Jawab Umum Tentang Memahami TAG map HTML.

Referensi: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map.