Thẻ map trong HTML

• Bùi Tấn Lực
• 24
• 26/09/2025

Thẻ map trong HTML dùng để gắn các khối hình lên một hình ảnh và người dùng có thể rê chuột và click vào liên kết của các khối, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ map trong HTML

Chức năng của Thẻ map trong HTML

Thẻ map trong HTML dùng để gắn các khối hình lên một hình ảnh và người dùng có thể rê chuột và click vào liên kết của các khối.

Cách hoạt động của Thẻ map trong HTML

Bên trong thẻ map có nhiều thẻ area.

Thẻ map phải có thuộc tính name và thẻ img sẽ sử dụng giá trị của thuộc tính name của map để gắn vào.

Thuộc tính shape và coords của thẻ area trong HTML

Thuộc tính shape giá trị rect dùng cho hình vuông, hình chữ nhật

coords="left,top,width,height"

left: Cách bên trái.

top: Cách bên trên.

width: Chiều rộng của khối.

height: Chiều cao của khối.

Thuộc tính shape giá trị circle dùng cho hình tròn

coords="toadox,toadoy,bankinh"

toadox: Tọa độ x của tâm hình tròn, cách từ trái qua.

toadoy: Tọa độ y của tâm hình tròn, cách từ trên xuống.

bankinh: Bán kính hình tròn.

Thuộc tính shape giá trị poly dùng cho hình đa giác

coords="x1,y1,x2,y2,...,xn,yn"

Mỗi góc nhọn của hình đa giác sẽ có tọa độ x,y.

x: tọa độ x, tính từ trái qua.

y: tọa độ y, tính từ trên xuống.

x1,y1 sẽ là 1 cặp tọa độ, x2,y2 sẽ là một cặp, bạn tạo bao nhiêu cặp cũng được.

Code Thẻ map trong HTML

<p>Rê chuột vào hình sau đó click</p>
<!--Tạo thẻ img có thuộc tính usemap giá trị là maphinh để gắn map có name maphinh lên hình -->
<img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" width="300" height="300" alt="map" usemap="#maphinh">
<!--Tạo thẻ map có name là maphinh-->
<map name="maphinh">
  <!--Hình vuông, hình chữ nhật-->
  <area shape="rect" coords="10,10,50,280" alt="CEO Bùi Tấn Lực" title="CEO Bùi Tấn Lực" href="https://webmoi.vn/ceo-bui-tan-luc/">
  <!--Hình tròn-->
  <area shape="circle" coords="250,60,50" alt="Thẻ area trong HTML" title="Thẻ area trong HTML" href="https://webmoi.vn/the-area-trong-html/">
  <!--Hình đa giác-->
  <area shape="poly" coords="300,300,200,300,200,200,300,200" alt="Code Thẻ area trong HTML" title="Code Thẻ area trong HTML" href="https://webmoi.vn/code-the-area-trong-html/"> 
</map>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ map trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ map trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn