Mengenal Tag Map untuk Memetakan Gambar

Tag map dalam pengkodean html memang disediakan untuk mengkayakan konten dalam sebuah website. Kita sering melihat website dangan konten berisi peta yang bisa disorot dan diklik pada bagian-bagian tertentu. Atau kita sering ngetag teman-teman di FB dengan foto-foto kita. Disinilah tag map ini digunakan. Kita akan bahas bagaimana tag ini bekerja.

Script dasar yang dibutuhkan untuk memetakan gambar kurang lebih sebagai berikut :

<img src="petaku.jpg" width="400" height="300" alt="Peta"
usemap="#petaku">

<map name="petaku">
<area shape="rect" coords="33,37,147,128" href="bingkai_foto.htm" alt="Bingkai_Foto" title="Bingkai_Foto">
<area shape="circle" coords="293,83,57" href="bola.htm" alt="Bola" title="Bola">
<area shape="poly" coords="164,156,219,161,243,207,243,235,267,259,193,288,118,257,118,241,142,233,140,208" href="rumah.htm" alt="Rumah" title="Rumah">
</map>

Dari script diatas terdapat atribut baru yang berbeda dari biasanya yaitu usemap pada tag img. Ini digunakan untuk menghubungkan gambar dengan tag map pada area tertentu. Nilai antara atribut usemap dan atribut name pada tag map haruslah sama supaya gambar ini terhubung dengan layer map tersebut.

Kemudian pada tag area terdapat dua atribut penting yang harus kita perhatikan yaitu atribut shape dan atribut coords. Nilai dari atribut shape ini ada empat diantaranya default, rect, circle,dan poly. Sedangkan nilai dari atribut coords adalah koordinat x,y dalam satuan pixel untuk sebuah area yang akan ditentukan. Sebagai contoh perhatikan gambar berikut :

Jika kita melihat gambar diatas kita bisa menentukan area untuk masing-masing objek gambar yaitu :

1. Bingkai foto adalah berbentuk segi empat sehingga nilai shape kita isi dengan rect yang berarti rectangular dengan koordinat x1,y1,x2,y2. Untuk menentukan posisi 1 dan 2 bisa bebas asalkan membentuk garis diagonal.
2. Bola adalah berbentuk lingkaran sehingga nilai shape dapat kita isi dengan circle dengan koordinat x,y,r. Nila x dan y adalah koordinat titik pusat lingkaran dengan r adalah jari-jarinya dalam pixel.
3. Rumah adalah berbentuk polygonal sehingga nilai shape-nya bisa ditulis dengan poly dengan koordinat x1,y1,x2,y2,x3,y3,x4,y4,… dst.

Menentukan Posisi

Untuk mendapatkan nilai posisi x,y ada beberapa cara, yang paling mudah dan populer adalah dengan menggunakan Photoshop. Cukup dengan menunjuk posisi yang diinginkan, kita bisa mendapatkan nilai tersebut dengan melihatnya di pallet info.