×

Cách sử dụng thẻ <map> và <area> để tạo bản đồ hình ảnh trong HTML

Avatar of admin
admin 1 Views

Tạo bản đồ hình ảnh trong HTML là một kỹ thuật hữu ích để gắn liên kết hoặc các chức năng khác vào các phần cụ thể của một hình ảnh mà không cần chia nhỏ nó ra. Để thực hiện điều này, thẻ <map> và <area> là hai yếu tố chính. Dưới đây là hướng dẫn chi tiết về cách sử dụng chúng.

Tìm hiểu về thẻ <map> và <area>

  • Thẻ <map>: Thẻ này được sử dụng để định nghĩa một bản đồ hình ảnh. Nó chứa các thẻ <area> để xác định các vùng tương tác trong hình ảnh.
  • Thẻ <area>: Thẻ này được sử dụng bên trong thẻ <map> và xác định các khu vực cụ thể (vd: hình chữ nhật, hình tròn, đa giác) trong hình ảnh, mỗi khu vực này có thể chứa liên kết hoặc chức năng cụ thể.

Cách sử dụng thẻ <map>

Thẻ <map> cần phải có thuộc tính name, đây là giá trị mà thẻ <img> sẽ sử dụng để tham chiếu đến bản đồ hình ảnh.

<map name="exampleMap">
  <!-- Các thẻ <area> sẽ nằm ở đây -->
</map>

Cách sử dụng thẻ <area>

Thẻ <area> có một số thuộc tính quan trọng mà bạn cần biết:

  • shape: Xác định hình dạng của khu vực (ví dụ: rect cho hình chữ nhật, circle cho hình tròn, poly cho đa giác).
  • coords: Định nghĩa các tọa độ của khu vực được xác định bằng shape.
  • href: URL mà khi người dùng nhấp vào khu vực này sẽ chuyển hướng đến.
  • alt: Văn bản thay thế cho khu vực đó, hiển thị khi hình ảnh không được tải.

Bố cục cơ bản của một bản đồ hình ảnh

Hãy xem xét một ví dụ cụ thể để hiểu rõ hơn về cách thức hoạt động của các thẻ này.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Map Example</title>
</head>
<body>
  <!-- Trình bày hình ảnh và liên kết bản đồ hình ảnh -->
  <img src="example.jpg" alt="Example Image" usemap="#exampleMap" width="600" height="400">

  <!-- Định nghĩa bản đồ hình ảnh -->
  <map name="exampleMap">
    <!-- Khu vực hình chữ nhật -->
    <area shape="rect" coords="34,44,270,350" href="http://example.com/rectangle" alt="Rectangle Area">

    <!-- Khu vực hình tròn -->
    <area shape="circle" coords="337,300,44" href="http://example.com/circle" alt="Circle Area">

    <!-- Khu vực đa giác -->
    <area shape="poly" coords="100,100,140,200,180,200,220,100" href="http://example.com/polygon" alt="Polygon Area">
  </map>
</body>
</html>

Giải thích ví dụ

  • Hình ảnh (<img>): Sử dụng thuộc tính usemap để liên kết tới bản đồ hình ảnh bằng cách sử dụng tên của thẻ <map> (bắt đầu với #).
  • Bản đồ hình ảnh (<map>): Đặt thuộc tính name để định danh bản đồ.
  • Khu vực (<area>):
    • Hình chữ nhật (shape="rect"): Được định vị bằng các tọa độ điểm trên-trái và điểm dưới-phải. Ví dụ, coords="34,44,270,350" có nghĩa là từ tọa độ x=34, y=44 đến x=270, y=350.
    • Hình tròn (shape="circle"): Cần tọa độ của trung tâm và bán kính. Ví dụ, coords="337,300,44" có nghĩa là trung tâm nằm tại x=337, y=300 và bán kính là 44.
    • Đa giác (shape="poly"): Xác định theo một chuỗi các tọa độ (x, y) liền kề nhau. Ví dụ, coords="100,100,140,200,180,200,220,100" nghĩa là các điểm tạo thành đa giác.

Kết luận

Việc sử dụng thẻ <map> và <area> trong HTML giúp bạn dễ dàng tạo ra các vùng tương tác cụ thể trên hình ảnh. Điều này không chỉ làm cho trang web của bạn trực quan hơn mà còn giúp người dùng có thêm nhiều tương tác hấp dẫn. Hãy áp dụng những kiến thức trên vào dự án của bạn để tạo ra những trải nghiệm người dùng tuyệt vời.

Comments

Bài viết liên quan