Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để xác định một khu vực trong bản đồ hình ảnh bằng HTML?


Sử dụng thẻ

Thẻ HTML

Thuộc tính
Giá trị
Mô tả
Alt
Văn bản
Chỉ định văn bản thay thế cho khu vực.
coords
if shape ="direct" then coords ="left, top, right, bottom"
if shape ="circle" then coords ="centerx, centery, radius"
if shape ="poly" then coords ="x1, y1, x2, y2, .., xn, yn"
Chỉ định tọa độ phù hợp với thuộc tính shape để xác định vùng của hình ảnh cho bản đồ hình ảnh.
tải xuống Làm cách nào để xác định một khu vực trong bản đồ hình ảnh bằng HTML?
tên tệp
Chỉ định rằng mục tiêu được tải xuống khi người dùng nhấp vào siêu kết nối.
Href
URL
Chỉ định URL của trang hoặc tên của liên kết mà liên kết chuyển đến.
hreflang Làm cách nào để xác định một khu vực trong bản đồ hình ảnh bằng HTML?
language_code
Chỉ định ngôn ngữ của URL đích.
phương tiện Làm cách nào để xác định một khu vực trong bản đồ hình ảnh bằng HTML?
truy vấn phương tiện
Chỉ định phương tiện / thiết bị mà URL mục tiêu được tối ưu hóa.
Nohref
true / false
Loại trừ một khu vực khỏi bản đồ hình ảnh
rel Làm cách nào để xác định một khu vực trong bản đồ hình ảnh bằng HTML?
thay thế
tác giả
dấu trang
Cứu giúp
giấy phép
tiếp theo
Không theo
người không có thai
tìm nạp trước
trước
Tìm kiếm
nhãn
Chỉ định mối quan hệ giữa tài liệu hiện tại và URL mục tiêu
Hình dạng
direct
hình chữ nhật
khoanh tròn
vòng tròn
Chỉ định hình dạng của bản đồ hình ảnh

poly
đa giác

Mục tiêu
_ blank
_cha mẹ
_bản thân
_đứng đầu
Nơi để mở URL mục tiêu.
_blank - URL mục tiêu sẽ mở trong một cửa sổ mới
_self - URL đích sẽ mở trong cùng một khung khi nó được nhấp vào
_parent - URL đích sẽ mở trong bộ khung chính
_top - URL mục tiêu sẽ mở trong toàn bộ phần nội dung của cửa sổ
loại Làm cách nào để xác định một khu vực trong bản đồ hình ảnh bằng HTML?
mime_type
Chỉ định loại MIME (Phần mở rộng Thư Internet Đa năng) của URL mục tiêu.

Ví dụ

Bạn có thể thử chạy mã sau để triển khai thẻ

<!DOCTYPE html>
<html>
   <head>
      <title>HTML area Tag</title>
   </head>
   <body>
      <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

      <map name = "tutorials">
         <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />

         <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
            href = "/html/index.htm" target = "_blank" />

         <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
            href = "/php/index.htm" target = "_blank" />
      </map>
   </body>
</html>