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

Thẻ <area> HTML

Định nghĩa và cách sử dụng

coords Thuộc tính quy định các tọa độ của vùng trong bản đồ hình ảnh.

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

Lưu ý:Tọa độ góc trên cùng bên trái của vùng là 0,0.

Lưu ý:Nếu tọa độ của thẻ area nào đó trùng với các vùng khác, vùng xuất hiện đầu tiên sẽ được ưu tiên. Trình duyệt sẽ bỏ qua các tọa độ ngoài giới hạn hình ảnh.

Mô hình

Sử dụng thuộc tính coords để định nghĩa các tọa độ của mỗi vùng trong bản đồ hình ảnh:

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

Thử ngay

Cú pháp

<area coords="value">

Giá trị thuộc tính

Giá trị Mô tả
x1,y1,x2,y2 Định nghĩa tọa độ góc trên cùng bên trái và góc dưới cùng bên phải của hình vuông (shape="rect").
x,y,bán kính Định nghĩa tọa độ tâm và bán kính (shape="circle").
x1,y1,x2,y2,...,xn,yn

Định nghĩa tọa độ các cạnh của đa giác.

Nếu cặp tọa độ đầu tiên và cuối cùng không giống nhau, trình duyệt sẽ thêm cặp tọa độ cuối cùng để đóng đa giác (shape="poly").

Giải thích chi tiết:

Thuộc tính coords của thẻ <area> xác định các tọa độ của vùng nhạy cảm với con trỏ chuột trong bản đồ hình ảnh khách hàng. Giá trị số và ý nghĩa của các tọa độ phụ thuộc vào hình dạng vùng được quyết định bởi thuộc tính shape.

Dưới đây là các giá trị thích hợp cho mỗi hình dạng:

Hình tròn: shape="circle", coords="x,y,z"

Ở đây x và y xác định vị trí tâm của hình tròn ("0,0" là tọa độ góc trên cùng bên trái của hình ảnh), r là bán kính hình tròn bằng đơn vị pixel.

Đa giác: shape="polygon", coords="x1,y1,x2,y2,x3,y3,..."

Mỗi cặp tọa độ "x,y" xác định một đỉnh của đa giác ("0,0" là tọa độ góc trên cùng bên trái của hình ảnh). Để định nghĩa tam giác ít nhất cần ba cặp tọa độ; đa giác cao độ则需要 nhiều đỉnh hơn.

Đa giác sẽ tự động đóng kín, vì vậy không cần lặp lại tọa độ đầu tiên ở cuối danh sách để đóng kín toàn bộ vùng.

Hình vuông: shape="rectangle", coords="x1,y1,x2,y2"

Tọa độ đầu tiên là tọa độ góc đỉnh của hình vuông, một cặp tọa độ là góc đỉnh đối diện, "0,0" là tọa độ góc trên bên trái của hình ảnh. Lưu ý rằng định nghĩa hình vuông là phương pháp đơn giản hóa để định nghĩa đa giác có bốn đỉnh.

Ví dụ, đoạn XHTML sau định nghĩa một vùng nhạy cảm với con trỏ ở góc dưới phải của hình ảnh 100x100 pixel và một vùng tròn ở chính giữa hình ảnh.

<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>

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