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

17 Maret 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat