Panduan Mesin Peta imej HTML: Panduan Kebaikan untuk Pemula

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menarik dari Peta Imej HTML. Jangan khawatir jika Anda baru dalam hal ini; saya akan memandu Anda setiap langkah dengan kesabaran yang sama seperti yang saya gunakan di kelas selama tahun. Mari kita mulai perjalanan ini bersama!

HTML - Image Map

Mengapa Menggunakan Peta Imej?

Imagin Anda memiliki gambar peta dunia yang indah di situs web Anda, dan Anda ingin pengunjung mengklik negara-negara berbeda untuk belajar lebih banyak tentang mereka. Itulah tempat peta imej berguna! Mereka memungkinkan Anda untuk membuat area yang dapat diklik di dalam satu gambar, menjadikannya elemen interaktif.

Tag `<map>` HTML

Tag <map> adalah seperti wadah untuk area interaktif kita. Ini adalah tempat kita mendefinisikan nama peta, yang kita akan gunakan untuk menghubungkannya ke gambar.

Ini adalah penampilannya:

<map name="worldmap">
<!-- Kita akan menambahkan area yang dapat diklik di sini -->
</map>

Dalam contoh ini, kita menamai peta kita "worldmap". PERTimbangkan ini seperti memberi ID unik pada peta Anda yang kita akan gunakan kemudian.

Tag `<area>` HTML

Sekarang, mari bicarakan tentang tag <area>. Ini tempat magik terjadi! Setiap tag <area> mendefinisikan area yang dapat diklik dalam peta imej kita.

Ini adalah struktur dasar:

<area shape="shape_type" coords="coordinates" href="link_url" alt="description">

mari kitauraikan ini:

shape: Mendefinisikan bentuk area yang dapat diklik (rect, circle, atau poly)
coords: Menentukan koordinat area
href: URL yang akan dituju saat area diklik
alt: Deskripsi teks area (penting untuk aksesibilitas)

Peta Imej HTML Dalam Aksi

Sekarang, mari kita gabungkan semuanya dengan contoh yang nyata. Imagin kita memiliki gambar pizza, dan kita ingin membuat setiap potongannya dapat diklik.

<img src="pizza.jpg" alt="Pizza yang Lezat" usemap="#pizzamap">

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="Potong Keju">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="Potong Pepperoni">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="Potong Jamur">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="Potong Sayur">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="Potong Supreme">
</map>

mari kitauraikan ini:

Kita memiliki tag <img> yang menampilkan gambar pizza kita.
Atribut usemap dalam tag <img> menghubungkannya ke peta kita yang dinamai "pizzamap".
Kita mendefinisikan peta <map> dengan nama "pizzamap".
Setiap <area> mewakili potong pizza:

Kita gunakan shape="poly" untuk bentuk poligon (potong segitiga).
coords menentukan titik-titik setiap segitiga.
Setiap potong mengarah ke halaman yang berbeda tentang jenis pizza itu.

Jenis Bentuk dan Koordinatnya

mari kita lihat bentuk-bentuk yang berbeda Anda dapat gunakan dalam peta imej Anda:

Bentuk	Koordinat	Contoh
rect	kiri, atas, kanan, bawah	`<area shape="rect" coords="0,0,82,126" href="square.html" alt="Persegi">`
circle	pusat-x, pusat-y, jari-jari	`<area shape="circle" coords="90,58,3" href="circle.html" alt="Bulatan">`
poly	x1,y1,x2,y2,...,xn,yn	`<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="Poligon">`

Ingat, koordinat diukur dalam piksel dari sudut kiri atas gambar!

Tips dan Trik

Gunakan Penyusun Peta Imej: Ketika saya pertama kali mulai mengajar ini, saya menghabiskan jam untuk menghitung koordinat. Sekarang, saya menggunakan alat online untuk menghasilkan mereka secara cepat!
Uji, Uji, Uji: Selalu periksa peta imej Anda di berbagai perangkat dan browser. Yang terlihat sempurna di komputer Anda mungkin berbeda pada smartphone.
Simplifikasi: Mulai dengan bentuk sederhana dan perlahan-lahan beralih ke yang lebih kompleks. Roma tidak dibangun dalam satu hari, dan neither are perfect image maps!
Aksesibilitas Penting: Selalu sertakan teks deskriptif alt untuk setiap area. Ini bukan hanya praktik yang baik; ini penting bagi pengguna dengan pembaca layar.

Kesimpulan

Selamat! Anda baru saja belajar membuat gambar interaktif menggunakan Peta Imej HTML. Ingat, seperti belajar menunggang sepeda, mungkin terasa berayun di awal, tapi dengan latihan, Anda akan membuat peta imej yang kompleks dalam waktu singkat.

Berikut kali Anda menjelajahi situs web dan menemukan gambar interaktif, Anda akan tahu keajaiban di baliknya. Siapa tahu? Mungkin Anda akan diinspirasi untuk menciptakan sesuatu yang lebih menarik untuk situs Anda sendiri!

Terus mengoding, terus belajar, dan terutama, bersenang-senang dengannya! Jika Anda pernah merasa terjebak, ingat: setiap ahli pernah menjadi pemula. Selamat memetakan!

Credits: Image by storyset