<map>: Phần tử Image Map
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <map> trong HTML được sử dụng cùng với các phần tử <area> để định nghĩa image map (vùng liên kết có thể nhấp trên ảnh).
Try it
<map name="infographic">
<area
shape="poly"
coords="130,147,200,107,254,219,130,228"
href="https://mdn.go-mizu.dev/docs/Web/HTML"
alt="HTML" />
<area
shape="poly"
coords="130,147,130,228,6,219,59,107"
href="https://mdn.go-mizu.dev/docs/Web/CSS"
alt="CSS" />
<area
shape="poly"
coords="130,147,200,107,130,4,59,107"
href="https://mdn.go-mizu.dev/docs/Web/JavaScript"
alt="JavaScript" />
</map>
<img
usemap="#infographic"
src="/shared-assets/images/examples/mdn-info2.png"
alt="MDN infographic" />
img {
display: block;
margin: 0 auto;
width: 260px;
height: 232px;
}
Thuộc tính
Phần tử này bao gồm các thuộc tính toàn cục.
name-
Thuộc tính
nameđặt tên cho map để có thể tham chiếu đến nó. Thuộc tính này phải có mặt và phải có giá trị không rỗng, không chứa ký tự khoảng trắng. Giá trị của thuộc tínhnamekhông được trùng với giá trị thuộc tínhnamecủa phần tử<map>khác trong cùng tài liệu. Nếu thuộc tínhidcũng được chỉ định, cả hai thuộc tính phải có cùng giá trị.
Ví dụ
Image map với hai vùng
Nhấp vào con vẹt bên trái để xem JavaScript, hoặc con vẹt bên phải để xem CSS.
HTML
<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
<area
shape="circle"
coords="75,75,75"
href="https://mdn.go-mizu.dev/docs/Web/JavaScript"
target="_blank"
alt="JavaScript" />
<area
shape="circle"
coords="275,75,75"
href="https://mdn.go-mizu.dev/docs/Web/CSS"
target="_blank"
alt="CSS" />
</map>
<img
usemap="#primary"
src="parrots.jpg"
alt="350 x 150 picture of two parrots" />
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng, nội dung cụm từ, nội dung hữu hình. |
|---|---|
| Nội dung cho phép | Bất kỳ phần tử trong suốt nào. |
| Bỏ qua thẻ | Không, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha cho phép | Bất kỳ phần tử nào chấp nhận nội dung cụm từ. |
| Vai trò ARIA ngầm định | Không có vai trò tương ứng |
| Vai trò ARIA cho phép | Không có role nào được phép |
| Giao diện DOM | HTMLMapElement |
Đặc tả
| Specification |
|---|
| HTML # the-map-element |