Thuộc tính usemap của yếu tố HTML <img>

Thẻ <img> HTML

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

usemap Thuộc tính xác định hình ảnh là bản đồ hình ảnh client.

Đồ họa bản đồ hình ảnh là hình ảnh có thể nhấn vào.

usemap Thuộc tính với Yếu tố <map>. hoặc id thuộc tính liên quan để thiết lập mối quan hệ giữa <img> và <map>.

Lưu ý:Nếu yếu tố <img> là后代 của yếu tố <a> hoặc <button>, thì không thể sử dụng usemap Thuộc tính.

Đọc thêm: Giải thích thuộc tính usemap

Mô hình

Đồ họa bản đồ hình ảnh có thể nhấn vào:

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

Thử ngay

Cú pháp

<img usemap="#mapname">

Giá trị thuộc tính

Giá trị Mô tả
#mapname Ký tự số (#) cộng với tên của thẻ <map> được sử dụng.

Đọc thêm: Giải thích thuộc tính usemap

usemap Thuộc tính cung cấp một cơ chế ánh xạ hình ảnh "client-side", hiệu quả loại bỏ việc xử lý tọa độ con trỏ trên máy chủ và các vấn đề trễ mạng mà nó gây ra. Bằng cách sử dụng các thẻ <map> và <area> đặc biệt, các nhà sáng tạo HTML có thể cung cấp một ánh xạ mô tả tọa độ của các khu vực nhạy cảm với liên kết trong hình ảnh usemap, ánh xạ này đồng thời chứa URL liên kết tương ứng. Giá trị của thuộc tính usemap là một URL, nó chỉ đến khu vực đặc biệt <map>. Trình duyệt trên máy tính của người dùng sẽ chuyển đổi tọa độ khi nhấp chuột vào hình ảnh thành hành động cụ thể, bao gồm tải và hiển thị tài liệu khác.

Chúng ta sẽ举 một ví dụ minh họa, đoạn mã nguồn dưới đây sẽ ánh xạ một hình ảnh 100x100 pixel map.gif thành 4 khu vực, khi người dùng nhấp vào một trong số những khu vực này, họ sẽ được liên kết đến các tài liệu khác nhau. Vui lòng chú ý, trong thẻ <img> này, chúng tôi đã hiệu quả bao gồm chức năng xử lý ánh xạ hình ảnh ismap, vì vậy những người dùng trình duyệt không có chức năng xử lý usemap có thể xử lý ánh xạ hình ảnh thông qua một phương thức khác, đó là cơ chế máy chủ:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Sự khác nhau trong việc ứng dụng thuộc tính ismap và usemap

Bản đồ là một ví dụ rất tốt về việc ứng dụng các thuộc tính ismap và usemap, chẳng hạn như khi duyệt trang web của một công ty lớn trên toàn quốc, người dùng có thể nhấp vào thành phố nơi họ sống trên bản đồ để nhận địa chỉ và số điện thoại của các cửa hàng bán lẻ gần đó.

Lợi ích của việc xử lý ảnh ánh xạ khách hàng của thẻ usemap là nó không yêu cầu máy chủ hoặc phần mềm máy chủ đặc biệt, khác với cơ chế ismap, nó có thể được sử dụng trong môi trường không web (không có mạng), chẳng hạn như sử dụng trong tệp cục bộ hoặc CD-ROM.

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ợ

Thẻ <img> HTML