HTML - Bản đồ hình ảnh: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của Bản đồ hình ảnh HTML. Đừng lo lắng nếu bạn là người mới bắt đầu; tôi sẽ hướng dẫn bạn từng bước với sự kiên nhẫn mà tôi đã sử dụng trong lớp học trong nhiều năm. Hãy cùng bắt đầu hành trình này nhé!

Tại sao nên sử dụng Bản đồ hình ảnh?

Hãy tưởng tượng bạn có một bức ảnh đẹp của bản đồ thế giới trên trang web của mình, và bạn muốn khách truy cập nhấp vào các quốc gia khác nhau để tìm hiểu thêm về chúng. Đó là lúc Bản đồ hình ảnh phát huy tác dụng! Chúng cho phép bạn tạo ra các khu vực nhấp được trên một hình ảnh duy nhất, biến nó thành một yếu tố tương tác.

Thẻ <map> HTML

Thẻ <map> giống như một容器 cho các khu vực tương tác của chúng ta. Đây là nơi chúng ta xác định tên của bản đồ, mà chúng ta sẽ sử dụng để kết nối nó với một hình ảnh.

Dưới đây là cách nó trông như thế nào:

<map name="worldmap">
<!-- Chúng ta sẽ thêm các khu vực nhấp được ở đây -->
</map>

Trong ví dụ này, chúng ta đã đặt tên cho bản đồ của mình là "worldmap". Hãy nghĩ về nó như việc đưa bản đồ của bạn một ID duy nhất mà chúng ta sẽ sử dụng sau này.

Thẻ <area> HTML

Bây giờ, hãy nói về thẻ <area>. Đây là nơi xảy ra phép màu! Mỗi thẻ <area> xác định một khu vực nhấp được trong bản đồ hình ảnh của chúng ta.

Dưới đây là cấu trúc cơ bản:

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

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

• shape: Xác định hình dạng của khu vực nhấp được (rect, circle, hoặc poly)
• coords: Chỉ định các tọa độ của khu vực
• href: URL sẽ truy cập khi khu vực được nhấp
• alt: Mô tả văn bản của khu vực (quan trọng cho khả năng truy cập)

Bản đồ hình ảnh HTML trong hành động

Bây giờ, hãy kết hợp tất cả lại với một ví dụ thực tế. Hãy tưởng tượng chúng ta có một hình ảnh của một chiếc pizza, và chúng ta muốn làm cho mỗi miếng pizza có thể nhấp được.

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

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="Miếng phô mai">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="Miếng pepperoni">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="Miếng nấm">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="Miếng rau">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="Miếng supreme">
</map>

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

1. Chúng ta có một thẻ <img> hiển thị hình ảnh của pizza.
2. Thuộc tính usemap trong thẻ <img> kết nối nó với bản đồ có tên là "pizzamap".
3. Chúng ta xác định thẻ <map> với tên "pizzamap".
4. Mỗi <area> đại diện cho một miếng pizza:

• Chúng ta sử dụng shape="poly" cho các hình đa giác (miếng tam giác).
• coords xác định các điểm của mỗi tam giác.
• Mỗi miếng pizza liên kết đến một trang khác về loại pizza đó.

Các loại hình dạng và tọa độ của chúng

Hãy xem xét các hình dạng khác nhau mà bạn có thể sử dụng trong bản đồ hình ảnh của mình:

Hình dạng	Tọa độ	Ví dụ
rect	trái, trên, phải, dưới	<area shape="rect" coords="0,0,82,126" href="square.html" alt="Hình vuông">
circle	tâm-x, tâm-y, bán kính	<area shape="circle" coords="90,58,3" href="circle.html" alt="Hình tròn">
poly	x1,y1,x2,y2,...,xn,yn	<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="Hình đa giác">

Lưu ý, các tọa độ được đo bằng pixel từ góc trên bên trái của hình ảnh!

Mẹo và thủ thuật

1. Sử dụng Trình tạo Bản đồ Hình ảnh: Khi tôi lần đầu tiên bắt đầu dạy điều này, tôi đã dành hàng giờ để tính toán các tọa độ. Bây giờ, tôi sử dụng các công cụ trực tuyến để tạo chúng nhanh chóng!

2. Kiểm tra, kiểm tra, kiểm tra: Luôn kiểm tra bản đồ hình ảnh của bạn trên các thiết bị và trình duyệt khác nhau. Điều gì trông hoàn hảo trên máy tính của bạn có thể bị lệch trên điện thoại di động.

3. Giữ cho nó đơn giản: Bắt đầu với các hình dạng đơn giản và từ từ chuyển sang các hình dạng phức tạp hơn. Rome không được xây dựng trong một ngày, và bản đồ hình ảnh hoàn hảo cũng vậy!

4. Khả năng truy cập quan trọng: Luôn bao gồm văn bản mô tả alt cho mỗi khu vực. Nó không chỉ là một thực hành tốt; nó là cần thiết cho người dùng có máy quét màn hình.

Kết luận

Chúc mừng! Bạn vừa học cách tạo ra các hình ảnh tương tác sử dụng Bản đồ hình ảnh HTML. Nhớ rằng, giống như học骑自行车, nó có thể cảm thấy不稳定 ban đầu, nhưng với sự luyện tập, bạn sẽ nhanh chóng tạo ra các bản đồ hình ảnh phức tạp.

Lần sau khi bạn đang duyệt một trang web và gặp một hình ảnh tương tác, bạn sẽ biết bí mật đằng sau nó. Ai biết được? Có lẽ bạn sẽ cảm hứng để tạo ra điều gì đó còn tuyệt vời hơn cho trang web của riêng bạn!

Tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó! Nếu bạn bao giờ cảm thấy bế tắc, hãy nhớ rằng: mọi chuyên gia đều từng là người mới bắt đầu. Chúc bạn thành công trong việc tạo bản đồ!

Credits: Image by storyset