Thông tin liên hệ
- 036.686.3943
- admin@nguoicodonvn2008.info
Thẻ <map> được sử dụng để xác định bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh chứa các khu vực có thể nhấp được. Ví dụ về bản đồ hình ảnh, với các khu vực có thể nhấp:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Thuộc tính name bắt buộc của phần tử <map> được liên kết với thuộc tính usemap của <img> và tạo mối quan hệ giữa hình ảnh và bản đồ.
Phần tử <map> chứa một số phần tử <area>, xác định các khu vực có thể nhấp vào trong bản đồ hình ảnh.
| Phần tử < map > |
Google Chrome | MS Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Có | Có | Có | Có | Có |
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| name | mapname | Được yêu cầu. Chỉ định tên của bản đồ hình ảnh |
Thẻ <map> cũng hỗ trợ các thuộc tính Global trong HTML.
Thẻ <map> cũng hỗ trợ các thuộc tính sự kiện trong HTML.
Ví dụ về một bản đồ hình ảnh khác, với các khu vực có thể nhấp:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Hầu hết các trình duyệt sẽ hiển thị phần tử <map> với các giá trị mặc định sau:
map {
display: inline;
}
Nguồn tin: Quantrimang.com
Ý kiến bạn đọc
Những tin mới hơn
Những tin cũ hơn
Top 5 mô hình Text-to-Speech mã nguồn mở tốt nhất 2026
prompt test Python
Prompt tạo Python script để xử lý ảnh hàng loạt
Top 5 mô hình Text-to-Speech mã nguồn mở tốt nhất 2026
Mẫu prompt tối ưu hóa SQL
Sử dụng AI agent trên Figma canvas
Prompt tạo giấy mời họp phụ huynh các cấp học
Prompt AI, câu lệnh AI giúp tạo bảng tổng quan thu chi
Cách tóm tắt kiến thức thành hình ảnh trực quan trên Napkin AI
Cách đổi giao diện (theme) trong Cursor
Hướng dẫn tạo câu hỏi kiểm tra miệng bằng Brisk it
Cách dùng ChatGPT để cải thiện tư duy và tìm ý tưởng mới
Gemini 3 Deep Think là gì? AI “biết suy nghĩ” hoạt động ra sao
Karaoke Ai rồi cũng sẽ khác- Hà Nhi Cover (Vinh Over ReMix)
Hướng dẫn tạo ảnh tổng kết năm học bằng ChatGPT
Cách viết prompt tạo ảnh AI chuẩn với công thức PICTURE
Hướng dẫn tạo file PDF bài tập trên Gemini không lỗi font
Các mẫu thiết kế AI agent: ReAct, Reflection và Planning
Hướng dẫn tạo bảng tổng kết cuối năm trên ChatGPT
Sử dụng công cụ: Tăng thêm sức mạnh cho AI agent