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#

`

Example of Image Map

`

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: `

  `

• Hình Tròn: `

  `

• Hình Đa Giác: `

  `

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:

`

Detailed Image Map Example

`

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.