JavaScript - Image Map: Hướng dẫn cơ bản

Xin chào các bạn, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của JavaScript Image Maps. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - tôi sẽ là hướng dẫn viên thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra các hình ảnh tương tác như một chuyên gia!

Image Map là gì?

Trước khi chúng ta đi sâu vào phần JavaScript, hãy hiểu rõ image map là gì. Hãy tưởng tượng bạn có một bức ảnh của một chiếc pizza, và bạn muốn xảy ra những điều khác nhau khi ai đó nhấp vào các topping khác nhau. Đó chính xác là điều mà image map làm - nó làm cho các khu vực cụ thể của một hình ảnh trở nên nhấp được!

Bắt đầu với HTML

Để tạo một image map, chúng ta bắt đầu với một chút HTML. Đừng lo lắng; nó đơn giản hơn bạn nghĩ!

<img src="pizza.jpg" alt="Pizza ngon lành" usemap="#pizzamap">

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

Hãy phân tích nó:

• Chúng ta có thẻ <img> để hiển thị hình ảnh của pizza.
• Thuộc tính usemap kết nối hình ảnh với bản đồ của chúng ta.
• Trong thẻ <map>, chúng ta xác định các khu vực nhấp được bằng các thẻ <area>.
• Mỗi <area> có hình dạng (tròn hoặc hình chữ nhật), tọa độ và một liên kết.

Cải thiện với JavaScript

Bây giờ, hãy thêm một chút魔法 JavaScript để làm cho image map của chúng ta trở nên tương tác hơn!

Bước 1: Chọn các phần tử

Trước tiên, chúng ta cần lấy các phần tử bằng JavaScript:

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

Mã này tìm thấy hình ảnh và tất cả các khu vực nhấp được mà chúng ta đã xác định.

Bước 2: Thêm các sự kiện nhấp

Bây giờ, hãy làm cho điều gì đó xảy ra khi chúng ta nhấp vào một khu vực:

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('Bạn đã nhấp vào ' + this.alt);
});
});

Mã này thêm một sự kiện nhấp vào mỗi khu vực. Khi được nhấp, nó hiển thị một thông báo với tên topping.

Bước 3: Nổi bật các khu vực

Hãy làm cho nó trực quan! Chúng ta sẽ nổi bật khu vực khi con trỏ chuột di qua:

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');
});

Mã này tạo một lớp phủ bán trong suốt cho mỗi khu vực và hiển thị/ẩn nó khi con trỏ chuột di qua/di ra.

Tập hợp tất cả

Dưới đây là mã JavaScript hoàn chỉnh của chúng ta:

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

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('Bạn đã nhấp vào ' + 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;
}

Kết luận

Chúc mừng! Bạn đã tạo thành công một image map tương tác bằng JavaScript. Nhớ lại khi tôi nói rằng bạn sẽ tạo ra các hình ảnh tương tác như một chuyên gia? Vậy mà bây giờ bạn đã có thể!

Dưới đây là tóm tắt nhanh những gì chúng ta đã học:

1. Chúng ta bắt đầu với HTML cơ bản để xác định hình ảnh và các khu vực nhấp được.
2. Chúng ta sử dụng JavaScript để chọn các phần tử này.
3. Chúng ta thêm các sự kiện nhấp để hiển thị thông báo khi các khu vực được nhấp.
4. Chúng ta tạo phản hồi trực quan với lớp phủ nổi bật khi con trỏ chuột di qua.

Bảng phương thức

Dưới đây là bảng các phương thức JavaScript chính mà chúng ta đã sử dụng:

Phương thức	Mô tả
querySelector()	Chọn phần tử đầu tiên khớp với một bộ chọn CSS
querySelectorAll()	Chọn tất cả các phần tử khớp với một bộ chọn CSS
addEventListener()	Thêm một bộ xử lý sự kiện vào một phần tử
preventDefault()	Ngăn chặn hành động mặc định của một sự kiện
createElement()	Tạo một phần tử HTML mới
appendChild()	Thêm một phần tử con mới vào một phần tử

Tiếp tục thực hành và thí nghiệm với các khái niệm này. Trước khi bạn biết, bạn sẽ có thể tạo ra tất cả các loại phần tử tương tác trên web. Nhớ rằng, mỗi chuyên gia từng là một người mới bắt đầu. Chúc bạn may mắn với việc lập trình!

Credits: Image by storyset