Atribut <img> usemap HTML

Tanda <img> HTML

Definisi dan penggunaan

usemap Atribut menentukan gambar sebagai peta gambar klien.

Peta gambar yang mengandung area yang dapat diklik.

usemap Atribut Elemen <map> dengan atribut name atau id yang berhubungan untuk membangun hubungan antara <img> dan <map>.

Perhatian:Jangan digunakan jika elemen <img> adalah turunan dari elemen <a> atau <button>. usemap Atribut.

Bacaan lanjut: Penjelasan detil atribut usemap

Contoh:

Peta gambar yang dapat diklik:

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

Coba sendiri

Sintaks

<img usemap="#mapname">

Nilai atribut

Nilai Deskripsi
#mapname Tanda titik ("#") ditambah dengan nama elemen <map> yang digunakan.

Bacaan lanjut: Penjelasan detil atribut usemap

usemap Atribut menyediakan mekanisme peta gambar 'klien', efektif menghilangkan pengolahan koordinat tetikus di sisi server, serta masalah keterlambatan jaringan yang disebabkan. Melalui tag <map> dan <area> khusus, penulis HTML dapat menyediakan peta yang mendeskripsikan koordinat area yang sensitif hyperlink di atas peta gambar usemap, peta ini termasuk URL hyperlink yang relevan. Nilai atribut usemap adalah URL yang mengarah ke area <map> khusus. Browser komputer pengguna akan mengkonversi koordinat yang ditekan tetikus di gambar ke tindakan khusus, termasuk memuat dan menampilkan dokumen lain.

Kami memberikan contoh penjelasan, kode asli di bawah ini mengkonversi gambar 100x100 pixel map.gif ke 4 area, saat pengguna mengklik salah satu area, akan dialihkan ke dokumen yang berbeda. Perhatikan, di dalam tag <img> ini, kami telah efektif menyertakan pengolahan peta gambar ismap, sehingga pengguna browser yang tidak memiliki fungsi usemap dapat mengelola peta gambar melalui mekanisme sisi server:

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

Perbedaan penggunaan atribut ismap dan usemap

Peta adalah contoh yang baik untuk menerapkan atribut ismap dan usemap, seperti saat mengelilingi halaman web perusahaan yang beroperasi di seluruh negeri, pengguna mungkin mengklik kota tempat tinggal mereka di peta untuk mendapatkan alamat dan nomor telepon toko retail di daerah sekitarnya.

Manfaat penggunaan image map klien dalam usemap adalah, ia tidak memerlukan server atau software server khusus, berbeda dengan mekanisme ismap, ia dapat digunakan di lingkungan non-web (tanpa jaringan), seperti penggunaan file lokal atau CD-ROM.

Dukungan Peramban

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

Tanda <img> HTML