Atribut <img> usemap HTML

Tanda <img> HTML

Definisi dan penggunaan

usemap Atribut menentukan imej sebagai peta imej klien.

Peta imej merujuk kepada imej yang mempunyai kawasan klik.

usemap Atribut Elemen <map> dengan hubungan kepada atribut name atau id, untuk membina hubungan antara <img> dengan <map>.

Perhatian:Jika elemen <img> adalah anak <a> atau <button>, maka tidak boleh digunakan usemap Atribut.

延伸阅读：详解 usemap 属性

Contoh

Peta imej yang mempunyai kawasan klik

<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>

亲自试一试

语法

<img usemap="#mapname">

属性值

值 描述
#mapname 井号字符（“#”）加上要使用的 <map> 元素的名称。

延伸阅读：详解 usemap 属性

usemap 属性提供了一种“客户端”的图像映射机制，有效地消除了服务器端对鼠标坐标的处理，以及由此带来的网络延迟问题。通过特殊的 <map> 和 <area> 标签，HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL，它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。

我们举例说明一下，下面这段源代码将一个 100x100 像素的图像 map.gif 映射为 4 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。请注意，在这个 <img> 标签中，我们已经有效地包含了对 ismap 图像映射的处理功能，这样，那些使用不具有 usemap 处理功能的浏览器用户，就可以通过另外一中途径，即服务器端机制来处理图像映射：

<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>

Perbezaan penggunaan properti ismap dan usemap

Peta adalah contoh yang baik untuk menggunaan properti ismap dan usemap, seperti, semasa menghubungi halaman web syarikat besar di seluruh negara, pengguna boleh mengklik bandar tempat tinggal mereka di peta untuk mendapatkan alamat dan nombor telefon toko retal di kawasan berdekatan.

Manfaat penggunaan penggunaan ismap dalam penggunaan peta adalah ia tidak memerlukan pelayar atau perisian pelayar khas, berbeza dengan mekanisme ismap, ia boleh digunakan dalam lingkungan bukan web (tanpa rangkaian), seperti penggunaan di fail tempatan atau CD-ROM.

Dukungan pelayar

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Tanda <img> HTML