JavaScript - Peta Imej: Panduan untuk Pemula

Hai sana, bakat coding super masa depan! Hari ini, kita akan melangkah ke dalam dunia menarik Peta Imej JavaScript. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan berjalan langkah demi langkah. Pada akhir panduan ini, Anda akan dapat membuat imej interaktif seperti seorang ahli!

Apa Itu Peta Imej?

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

Memulai dengan HTML

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

<img src="pizza.jpg" alt="Pizza yang 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.

Menambahkan Interaktifitas dengan JavaScript

Sekarang, mari tambahkan sedikit ilmu JavaScript untuk membuat peta imej kita lebih interaktif!

Langkah 1: Memilih Elemen

Pertama, kita perlu mengambil elemen kita menggunakan JavaScript:

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

Kode ini menemukan gambar kita dan semua area yang kita tentukan.

Langkah 2: Menambahkan Event Click

Sekarang, mari membuat 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 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 mouseover/mouseout.

Menggabungkan Semua

Berikut 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('Anda mengklik ' + 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 menciptakan peta imej interaktif menggunakan JavaScript. Ingat saat saya katakan Anda akan menciptakan imej interaktif seperti seorang ahli? Well, lihat Anda sekarang!

Berikut adalah ringkasan apa yang kita pelajari:

1. Kita mulai dengan HTML dasar untuk menentukan gambar kita dan area yang dapat diklik.
2. Kita menggunakan JavaScript untuk memilih elemen ini.
3. Kita menambahkan event click untuk menampilkan peringatan saat area diklik.
4. Kita membuat umpan balik visual dengan menyorot area saat mouse melayang.

Tabel Metode

Berikut 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

Tetap latihan dan eksperimen dengan konsep ini. Sebelum Anda tahu, Anda akan menciptakan semua jenis elemen interaktif web. Ingat, setiap ahli pernah menjadi pemula. Selamat coding!

Credits: Image by storyset