JavaScript - Peta Gambar: Panduan untuk Pemula

Hai teman-teman, sang coding superstar masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia Peta Gambar JavaScript. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya – saya akan menjadi panduan ramah Anda, dan kita akan berjalan langkah demi langkah. Pada akhir tutorial ini, Anda akan membuat gambar interaktif seperti seorang ahli!

Apa Itu Peta Gambar?

Sebelum kita masuk ke bagian JavaScript, mari kita mengerti apa itu peta gambar. Bayangkan Anda memiliki gambar pizza, dan Anda ingin hal-hal berbeda terjadi saat seseorang mengklik topping yang berbeda. Itu tepat apa yang dilakukan peta gambar – membuat area khusus dalam gambar dapat diklik!

Memulai dengan HTML

Untuk membuat peta gambar, kita mulai dengan beberapa HTML dasar. Jangan khawatir; itu lebih mudah daripada yang Anda pikirkan!

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

<map name="pizzamap">
<area shape="circle" coords="100,100,50" href="#cheese" alt="Keju">
<area shape="rect" coords="200,50,300,150" href="#pepperoni" alt="Pepperoni">
</map>

mariuraikan ini:

• Kita memiliki tag <img> yang menampilkan gambar pizza kita.
• Atribut usemap menghubungkan gambar ke peta kita.
• Dalam tag <map>, kita menentukan area yang dapat diklik dengan tag <area>.
• Setiap <area> memiliki bentuk (lingkaran atau persegi panjang), koordinat, dan tautan.

Memperbaiki dengan JavaScript

Sekarang, mari kita tambahkan sedikit magi JavaScript untuk membuat peta gambar kita lebih interaktif!

Langkah 1: Memilih Elemen

Pertama, kita perlu mengambil elemen-elemennya menggunakan JavaScript:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

Kode ini menemukan gambar dan semua area yang kita tentukan.

Langkah 2: Menambahkan Event Click

Sekarang, mari kita buat sesuatu terjadi saat kita mengklik area:

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('Anda mengklik ' + this.alt);
});
});

Kode ini menambahkan event click ke setiap area. Saat diklik, ia menampilkan peringatan dengan nama topping.

Langkah 3: Menyorot Area

Mari kita membuatnya terlihat! Kita akan menyorot area saat mouse melayang di atasnya:

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

areas.forEach(area => {
const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

Kode ini membuat overlay semi-transparan untuk setiap area dan menampilkan/menyembunyikan itu saat mouse melayang/meninggalkan.

Menggabungkan Semua

Ini adalah kode JavaScript lengkap kita:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('You clicked on ' + this.alt);
});

const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

Kesimpulan

Selamat! Anda telah membuat peta gambar interaktif menggunakan JavaScript. Ingat saat saya katakan Anda akan membuat gambar interaktif seperti seorang ahli? Well, lihat Anda sekarang!

Berikut adalah ringkasan apa yang kita pelajari:

1. Kita mulai dengan HTML dasar untuk menentukan gambar dan area yang dapat diklik.
2. Kita menggunakan JavaScript untuk memilih elemen-elemennya.
3. Kita menambahkan event click untuk menampilkan peringatan saat area diklik.
4. Kita membuat visual feedback dengan menyorot area saat mouse melayang di atasnya.

Tabel Metode

Ini adalah tabel metode JavaScript utama yang kita gunakan:

Metode	Deskripsi
querySelector()	Memilih elemen pertama yang cocok dengan selektor CSS
querySelectorAll()	Memilih semua elemen yang cocok dengan selektor CSS
addEventListener()	Menambahkan handler event ke elemen
preventDefault()	Mencegah aksi default dari event
createElement()	Membuat elemen HTML baru
appendChild()	Menambahkan node anak baru ke elemen

Terus latih dan eksperimen dengan konsep-konsep ini. Sebelum Anda tahu, Anda akan membuat semua jenis elemen interaktif web. Ingat, setiap ahli pernah menjadi pemula. Selamat coding!

Credits: Image by storyset