Peta imej

Dalam HTML dan XHTML, suatu peta imej ialah senarai koordinat berkenaan imej yang dicipta untuk menetapkan hiperpautan di berbilang kawasan pada imej ke pautan-pautan berbeza (tidak seperti pautan lazim, di mana keseluruhan imej dipautkan ke satu pautan). Sebagai contoh, sebuah peta dunia boleh memiliki hiperpautan bagi setiap negara kepada pautan-pautan maklumat lanjut tentang sesebuah negara.

Bahagian pelayan

Peta imej bahagian pelayan pertama kali disokong dalam versi 1.1 Mosaic. Peta imej sebegini membolehkan pelayar web untuk menghantar maklumat kedudukan ke pelayan berkenaan titik pengguna mengeklik satu imej. Ini membolehkan pelayan menilai apa kandungan yang patut diberi berdasarkan titik klik dilakukan.

Kod HTML peta imej jenis ini memerlukan teg <img> di dalam tag <a>...</a>, dan teg <img> mesti memiliki atribut ismap.

<a href="/imagemapper"><img src="image.png" ismap /></a>

Ketika seseorang klik pada saatu imej, pelayar web akan menerbitkan koordinat X dan Y (relatif terhadap bucu atas kiri imej) ke URL sebagai rentetan kueri dan mengakses URL susulan (sebagai contoh, /imagemapper?3,9).

Sekiranya pelayan tidak menyokong ismap, rentetan kueri tidak patut ditambah ke URL dan pelayan perlu bertindak balas dengan betul (sebagai contoh, memberi halaman navigasi teks).

Bahagian klien

Peta imej bahagian klien diperkenalkan dalam HTML 3.2, dan tidak memerlukan sebarang logik dilakukan pelayan. Peta imej sebegini juga tidak memerlukan JavaScript.

HTML tulen

Peta imej klien HTML memiliki dua bahagian:

1. imej sebenar yang dibenam dengan teg <img>. Teg imej itu mesti memiliki atribut usemap, yang menamakan peta imej bagi kegunaan lanjut.
2. Unsur <map>, dan didalamnya, unsur <area>, dengan setiap satu menetapkan satu kawasan boleh diklik dalam peta imej. Ini adalah sama dengan teg <a> yang menetapkan URL dalam tulisan. Satu atribut title boleh diberi. Bagi tujuan ketercapaian web, biasanye penting – dan kadangkala, sebagai kewajiban perundangan – untuk memberikan atribut alt yang menghuraikan pautan yang boleh dibaca perisian pembaca skrin, sebagai contoh, kepada orang buta.

Unsur <area> boleh berbentuk segi empat (shape="rect"), poligon (shape="poly") atau bulatan (shape="circle"). Nilai yang digunakan merupakan pasangan koordinat. Setiap pasang memiliki nilai X dan Y (dari bucu atas kiri imej) dan dipisahkan dengan koma.

• Segi empat: Empat koordinaat: "x1,y1,x2,y2"
• Poligon: Koordinat tak terhad (gandaan dua): "x1,y1,x2,y2, [...] xn,yn"
• Bulatan: Sepasang koordinat dengan satu nilai jejari: "x1,y1,jejari"

Contoh ini menetapkan satu kawasan segi empat ("9,372,66,397"), dan jika diklik, pengguna akan dibawa ke laman utama Wikipedia.

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://ms.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

CSS

Pendekatan yang lebih moden ialah menindih pautan pada imej menggunakan kedudukan mutlak CSS; walau bagaimanapun, ini hanya menyokong kawasan segi empat. Teknik CSS ini mungkin sesuai untuk membuat peta imej berfungsi dengan betul pada iPhones, yang mungkin tidak dapat menskala semula peta imej HTML tulen dengan betul.

Rekaan daan kegunaan

Ia adalah mungkin untuk membuat peta imej sisi klien dengan tangan menggunakan editor teks, tetapi kaedah itu memerlukan pereka web untuk mengetahui cara mengekod HTML serta cara menghitung koordinat kawasan yang ingin mereka letakkan di atas imej. Akibatnya, kebanyakan peta imej yang dikodkan dengan tangan adalah poligon mudah.

Oleh kerana mencipta peta imej dalam editor teks memerlukan banyak masa dan tenaga, banyak aplikasi telah direka bentuk untuk membolehkan pereka web mencipta peta imej dengan cepat dan mudah, sama seperti mencipta bentuk dalam penyunting grafik vektor. Contoh aplikasi ini termasuk Dreamweaver atau KImageMapEditor Adobe (untuk KDE), dan aspek peta imej dalam GIMP.

Peta imej yang tidak menjadikan kawasan boleh klik jelas berisiko menyebabkan pengguna tertakluk kepada navigasi daging misteri. Walaupun mereka melakukannya, hala mereka mungkin tidak jelas. Ini boleh diperbaiki sebahagiannya dengan kesan peralihan.