Belajar HTML‎ > ‎

Image Map

posted Jul 22, 2011, 11:16 PM by Editor KursusInternet   [ updated Nov 19, 2011, 9:37 PM ]

Pendahuluan

Image map adalah daftar koordinat yang akan dipetakan pada file gambar tertentu yang mendefinisikan area dengan tautan / link ke situs tertentu.

Image map dibuat dengan penggunaan tag map. Artikel berikut akan rinci membahas penggunaan tag map dan definisi area yang didukung.

Syntax

Image map terdiri dari 2 tag yang saling terkait, yaitu map dan area. Berikut adalah syntax penggunaan tag map.

<map name='nama_map'>
 <area shape='jenis_shape' coords='daftar_koordinat' href='url_link' alt='deskripsi' target='target_link' />
 <area shape='jenis_shape' coords='daftar_koordinat' href='url_link' alt='deskripsi' target='target_link' />
</map>

Untuk jenis_shape ada beberapa value yang bisa digunakan yaitu :
  • rect : mendefinisikan area berbentuk persegi panjang
  • circle : mendefinisikan area berbentuk lingkaran.
  • poly : mendefinisikan area polyline atau area dengan jumlah sisi banyak.
Dan untuk daftar_koordinat, tentunya bergantung juga kepada jenis bentuk (jenis_shape) yang digunakan yaitu :
  • x1, y1, x2, y2 untuk jenis rect.
  • x, y, panjan_radius untuk jenis circle.
  • x1, y1, x2, y2, x3, y3, ... xn, yn untuk jenis poly.
Semua koordinat di atas dimulai dari sudut kiri atas gambar.

Contoh Penggunaan

File gambar contoh.png seperti terlihat pada gambar berikut akan dibuat image mapnya. Sesuai informasi yang ada, maka kita buat 3 area yaitu : rect, circle dan poly dengan koordinat yang tertera.



Image map yang terbentuk kira-kira sebagai berikut :

<map name='kursusinternet1'>
 <area shape='circle' coords='220,110,20' href='http://www.kursusinternet.com' alt='Kursus Internet' title='Kursus Internet' 
      target='_blank' />
 <area shape='rect' coords='20,20,100,60' href='http://www.belajarsql.com' alt='Belajar SQL' title='Belajar SQL' target='_blank' />
 <area shape="poly" coords='22.728,142.421,61.619,152.523,86.873,138.886,93.944,164.14,118.188,185.858,12.122,179.292'
 href='http://www.phi-integration.com' alt='PHI-Integration' title='PHI-Integration' target='_blank' />

dan kemudian kita relasikan ke gambar dengan menggunakan atribut usemap pada tag img.

<img src="contoh.png" usemap="#kursusinternet1" />

Selesai.

Contoh Penggunaan Tingkat Lanjut

Untuk contoh di atas masih tergolong contoh yang sederhana. Bagaimana kalau ada objek gambar yang saling tumpang tindih seperti pada gambar di bawah ini ? Dan masing-masing memiliki tautan / link tersendiri ?

Untuk kasus ini maka urutan peletakan tag area menjadi penting. Aturannya adalah definisi area objek yang terluar diletakkan di bawah objek lainnya.

Sebagai contoh definisi map untuk gambar tersebut adalah sebagai berikut.

<img src="contoh2.png" usemap="#kursusinternet2" />
<map name='kursusinternet2'>
 <area shape="poly" coords='146.725,68.175,183.09,93.853,147.866,109.591,154.552,88.883'
 href='http://www.belajarsql.com' alt='Belajar SQL' title='Belajar SQL' target='_blank' />
 <area shape="poly" coords='116.673,49.487,229.305,96.459,120.208,125.249,140.916,87.368'
 href='http://www.jaringanbisnis.com' alt='Jaringan Bisnis' title='Jaringan Bisnis' target='_blank' />
</map>

Selesai.

Sumber Referensi


Kursus Internet Belajar SQL PHI-Integration Belajar SQL Jaringan Bisnis
Comments