Thẻ <map> HTML

Khuyến nghị khóa học:

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

<map> thẻ để định nghĩa bản đồ ảnh. Bản đồ ảnh (image map, một loại bản đồ định hướng phân区分) là một ảnh có khu vực có thể nhấp. thẻ cần mộtthuộc tính name thuộc tính này tương ứng với thẻ <img> của Thuộc tính usemap

<map> liên quan, tạo mối quan hệ giữa ảnh và bản đồ. thẻ，định nghĩa khu vực có thể nhấp trong bản đồ ảnh. Thẻ <area> chứa một số

Xin xem thêm:

Hướng dẫn tham khảo HTML DOM:Đối tượng Map

Mô hình

Ví dụ 1

Bản đồ ảnh có khu vực có thể nhấp:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Thử trực tiếp

Ví dụ 2

Một bản đồ ảnh có khu vực có thể nhấp khác:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Thử trực tiếp

Thuộc tính

Thuộc tính Giá trị Mô tả
name Tên bản đồ Yêu cầu. Định nghĩa tên của bản đồ hình ảnh.

Thuộc tính toàn cục

<map> Thẻ này cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<map> Thẻ này cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị với giá trị mặc định sau: <map> Thành phần:

map {
  display: inline;
}

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ợ