Bản đồ ảnh (Image Map) - HTML Image Map

minhu

Bản đồ ảnh (Image Map) trong HTML cho phép bạn tạo các liên kết tương tác trên một hình ảnh. Bạn có thể chỉ định các vùng cụ thể của hình ảnh để liên kết tới các trang web hoặc các phần khác của trang. Đây là cách sử dụng thẻ <map> và <area> để tạo bản đồ ảnh trong HTML.

Cấu Trúc Cơ Bản

<img>: Thẻ hình ảnh, dùng để hiển thị hình ảnh trên trang.
<map>: Thẻ bản đồ ảnh, chứa các thẻ <area> để xác định các vùng liên kết trong hình ảnh.
<area>: Thẻ định nghĩa một vùng liên kết trong hình ảnh.

Ví Dụ Cơ Bản

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Image Map Example</title>
</head>
<body>

<h1>Example of Image Map</h1>

<img src="map-image.jpg" usemap="#image-map" alt="Map Image">

<map name="image-map">
    <area shape="rect" coords="34,44,270,350" href="https://example.com" alt="Example Site">
    <area shape="circle" coords="130,130,50" href="https://example.org" alt="Example Org">
    <area shape="poly" coords="200,200,250,200,250,250,200,250" href="https://example.net" alt="Example Net">
</map>

</body>
</html>

Giải Thích Các Thẻ

<img>:
- src: Địa chỉ của hình ảnh.
- usemap: Tham chiếu đến thẻ <map> qua thuộc tính name.
<map>:
- name: Tên của bản đồ ảnh, phải khớp với giá trị của thuộc tính usemap trong thẻ <img>.
<area>:
- shape: Hình dạng của vùng liên kết. Có thể là rect (hình chữ nhật), circle (hình tròn), hoặc poly (hình đa giác).
- coords: Tọa độ của vùng liên kết. Tùy thuộc vào shape:
- rect: x1,y1,x2,y2 (tọa độ của hai góc đối diện của hình chữ nhật).
- circle: x,y,r (tọa độ tâm và bán kính của hình tròn).
- poly: Các tọa độ của các đỉnh của hình đa giác, cách nhau bằng dấu phẩy.
- href: Địa chỉ liên kết.
- alt: Mô tả vùng liên kết, thường được sử dụng cho truy cập và SEO.

Tùy Chỉnh

Hình Chữ Nhật:

   <area shape="rect" coords="x1,y1,x2,y2" href="link.html" alt="Description">

Hình Tròn:

   <area shape="circle" coords="x,y,r" href="link.html" alt="Description">

Hình Đa Giác:

   <area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xn,yn" href="link.html" alt="Description">

Ví Dụ Chi Tiết

Giả sử bạn có một hình ảnh bản đồ với ba vùng liên kết khác nhau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detailed Image Map Example</title>
</head>
<body>

<h1>Detailed Image Map Example</h1>

<img src="world-map.jpg" usemap="#world-map" alt="World Map">

<map name="world-map">
    <!-- Vùng liên kết hình chữ nhật cho châu Á -->
    <area shape="rect" coords="34,44,270,350" href="https://example.com/asia" alt="Asia">
    <!-- Vùng liên kết hình tròn cho châu Âu -->
    <area shape="circle" coords="400,150,80" href="https://example.com/europe" alt="Europe">
    <!-- Vùng liên kết hình đa giác cho châu Mỹ -->
    <area shape="poly" coords="200,200,250,200,250,250,200,250" href="https://example.com/americas" alt="Americas">
</map>

</body>
</html>

Lưu Ý

Tương thích: Đảm bảo rằng hình ảnh của bạn có độ phân giải đủ cao để các vùng liên kết hoạt động chính xác.
Truy cập: Cung cấp mô tả rõ ràng trong thuộc tính alt để cải thiện khả năng truy cập và SEO.

Bản đồ ảnh là một công cụ hữu ích để tạo các liên kết tương tác trên hình ảnh, giúp người dùng dễ dàng điều hướng và tương tác với các phần của hình ảnh.