Thẻ map trong HTML
Bùi Tấn Lực - 904
- 26/09/2025
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>
Những lưu ý khi sử dụng thẻ map trong HTML
Thẻ map mang lại khả năng tạo vùng tương tác trực tiếp trên hình ảnh, tuy nhiên nếu triển khai không đúng sẽ khiến liên kết hoạt động thiếu chính xác hoặc làm giảm trải nghiệm người dùng. Khi xây dựng image map cho website, bạn nên chú ý một số nguyên tắc quan trọng dưới đây để đảm bảo khả năng sử dụng, bảo trì và tối ưu hiệu quả.
Khai báo thuộc tính usemap và name phải khớp nhau
Thẻ img và map liên kết với nhau thông qua hai thuộc tính usemap và name. Chỉ cần một trong hai giá trị không trùng khớp, toàn bộ vùng nhấp sẽ không hoạt động. Vì vậy, hãy đặt tên ngắn gọn, dễ nhận biết và thống nhất trong toàn bộ tài liệu HTML để hạn chế lỗi khi chỉnh sửa.
Nếu đổi tên map trong quá trình phát triển, hãy kiểm tra lại tất cả các hình ảnh đang sử dụng để tránh liên kết bị mất.
Luôn thêm alt cho thẻ area để tăng khả năng truy cập
Mỗi vùng tương tác nên có thuộc tính alt mô tả ngắn gọn mục đích của liên kết. Điều này giúp các công cụ hỗ trợ người khuyết tật hiểu được nội dung, đồng thời cung cấp thêm ngữ cảnh nếu hình ảnh không thể hiển thị.
Nội dung mô tả nên rõ ràng, phản ánh đúng chức năng của từng khu vực thay vì sử dụng các cụm từ chung chung như "Nhấn vào đây" hoặc "Liên kết".
Kiểm tra tọa độ coords sau khi thay đổi kích thước hình ảnh
Tọa độ trong thuộc tính coords được xác định dựa trên kích thước của hình ảnh tại thời điểm tạo image map. Nếu ảnh bị thay đổi chiều rộng hoặc chiều cao mà không cập nhật lại tọa độ, vùng nhấp có thể bị lệch khỏi vị trí mong muốn.
Trước khi đưa website vào hoạt động, hãy kiểm tra lại toàn bộ vùng tương tác trên nhiều độ phân giải khác nhau để đảm bảo mọi liên kết đều chính xác.
Ưu tiên thiết kế responsive khi sử dụng image map
Website hiện đại cần hiển thị tốt trên máy tính, máy tính bảng và điện thoại. Vì image map truyền thống sử dụng tọa độ cố định nên có thể phát sinh lỗi khi hình ảnh tự co giãn theo màn hình.
Nếu dự án yêu cầu thiết kế responsive, hãy cân nhắc áp dụng các giải pháp hỗ trợ cập nhật tọa độ theo kích thước thực tế của hình ảnh hoặc lựa chọn phương pháp khác phù hợp hơn. Việc kiểm thử trên nhiều thiết bị sẽ giúp phát hiện sớm các vị trí nhấp không chính xác và cải thiện trải nghiệm người dùng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ map trong HTML.
- 0 Bình luận
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 *
