Thuộc tính shape của HTML <area>

Thẻ <area> HTML

Xác định và cách sử dụng

hình Thuộc tính xác định hình dạng của khu vực.

hình Thuộc tính với Thuộc tính coords Được sử dụng cùng nhau để xác định kích thước, hình dạng và vị trí của khu vực.

Mô hình

Sử dụng thuộc tính shape để xác định hình dạng của mỗi khu vực trong bản đồ hình ảnh:

<map name="planetmap">
<area shape="rect" coords="0,0,114,576" href="sun.html" alt="Sun">
<area shape="circle" coords="190,230,5" href="mercur.html" alt="Mercury">
<area shape="circle" coords="228,230,5" href="venus.html" alt="Venus">
</map>

Thử ngay

Cú pháp

<area shape="default|rect|circle|poly">

Giá trị thuộc tính

Giá trị Mô tả
default Định nghĩa toàn bộ khu vực.
rect Xác định khu vực hình vuông.
circle Xác định khu vực hình tròn.
poly Xác định khu vực đa giác.

Giải thích chi tiết:

hình Thuộc tính được sử dụng để xác định hình dạng của khu vực nhạy cảm với con trỏ chuột trong bản đồ hình ảnh:

  • Hình tròn (circ hoặc circle)
  • Đa giác (poly hoặc polygon)
  • Hình vuông (rect hoặc rectangle)

hình Giá trị của thuộc tính sẽ ảnh hưởng đến cách trình duyệt giải thích thuộc tính coords. Nếu không sử dụng hình thuộc tính, thì sẽ giả định sử dụng giá trị default. Theo tiêu chuẩn, default có nghĩa là vùng này bao phủ toàn bộ hình ảnh. Trong thực tế, trình duyệt mặc định sử dụng vùng hình vuông, và mong muốn tìm thấy 4 giá trị coords. Nếu không chỉ định hình và không bao gồm 4 giá trị tọa độ trong thẻ, trình duyệt sẽ bỏ qua toàn bộ vùng này.

có thể nhận diện hình Trình duyệt cung cấp giá trị mặc định của thuộc tính, có thể cung cấp một vùng bao gồm tất cả các điểm nóng, để sử dụng trong trường hợp nhấp chuột ngoài phạm vi của các điểm nóng được định nghĩa. Do vì các vùng trong thẻ <map> được thực hiện theo nguyên tắc "cũ nhất được ưu tiên", tất cả các vùng mặc định phải được đặt ở cuối. Nếu không, vùng mặc định sẽ che盖 tất cả các vùng khác xuất hiện trong bản đồ hình ảnh.

Trình duyệt không có yêu cầu chặt chẽ về việc thực hiện tên hình dạng. Ví dụ, đối với hình vuông, Netscape 4 không thể nhận diện "rectangle", nhưng có thể nhận diện "rect". Do đó, chúng tôi khuyên bạn nên sử dụng tên viết tắt.

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Thẻ <area> HTML