Menggunakan Image Map

Apa teman-teman pernah mendengar apa itu image map ? Pada HTML, image map merupakan pemetaan gambar untuk menentukan daerah (area) dari suatu gambar <img> atau object dan menetapkan tindakan tertentu untuk setiap daerah seperti mengambil dokumen, menjalankan program, mengarahkan URL dan lain-lain.  Ketika daerah  tersebut di eksekusi/diaktifkan oleh user maka aksi akan dijalankan. Tag ini sangat bermanfaat ketika ingin memetakan suatu gambar dan memberikan aksi pada daerah tersebut. Berikut beberapa tag html untuk image map :

1.      Tag <map>  digunakan untuk mendefinisikan suatu gambar (image-map). Peta gambar adalah gambar dengan area yang dapat dikasih link. Tag <map> wajib/diharuskan karena terkait dengan atribut usemap pada tag <img> yang akan berfungsi menciptakan hubungan antar gambar.

2.      Tag <area> digunakan untuk mendefinisikan daerah dalam peta gambar. Tag <area> ini mampu membagi beberapa gambar menjadi beberapa area.

3.      Attribut usemap dan atribut name digunakan untuk menyatukan antara 2 elemen, yaitu elemen gambar dan elemen peta.

4.      Attribut coords digunakan untuk menspesifikasikan titik koordinat x dan titik koordinat y pada gambar. Titik X dan Y gambar dimulai dari pojok kiri atas.

Berikut syntaks default pada image map :

Perhatikan gambar berikut :

Terdapat 3 value untuk area pada peta gambar

1.      Area rectangle

2.      Area circle

3.      Area polygon

Untuk menentukan koordinat dari masing-masing bentuk dapat menggunakan software gambar editor gambar seperti adobe photoshop. Perhatikan gambar berikut :

Jika shape bernilai rect, maka syntax coords harus seperti ini:

Jika shape bernilai circle. Maka syntax coords harus seperti ini :

Jika shape bernilai poly mala syntax coords harus seperti ini:

Demikian sekilas tentang image map, semoga dapat menjadi referensi buat teman-teman