Membuat area klik pada image dengan HTML5 Map Part 1

Melihat postingan terakhir saya ternyata sudah 1 bulan saya tidak posting, alhamdulillah kali ini saya berkesempatan untuk posting sesuatu yang mudah-mudahan bermanfaat. Berawal dari project yang sudah selesai saya kerjakan terkait permintaan dari atasan untuk dibuatkan sebuah microsite. Kebutuhan yang di inginkan oleh client yaitu ketika ada bagian gambar atau image di klik maka akan memunculkan video fullscreen, lalu apabila video selesai di play secara otomatis akan kembali lagi ke tampilan awal.

Terjadi diskusi yang lumayan panjang dengan pak bos dikarenakan timeline yang dibutuhkan sangat singkat sekali yaitu 4 hari. Kebetulan saja saya pernah membuat hal semacam ini dikantor sebelumnya. Jadi waktu 4 hari yang diberikan itu saya manfaatkan sebaik mungkin. Nah..itu baru pembukaannya belum ke masalah intinya.hehe

Setelah diskusi selesai saya pun langsung kerjakan dengan menerapkan teknik pada HTML yang dinamakan HTML5 Image Map. Dengan HTML5 Map kita bisa membuat area klik pada gambar tanpa repot – repot melakukan slicing.

Definisi HTML Image Map

Definisi singkatnya tag <map> disini digunakan untuk kebutuhan client-side ketika me-load image-map, sedangkan image-map sendiri adalah sebuah image dengan area yang dapat kita klik. Butuh sebuah atribut bernama usemap yang digunakan untuk mengartikan sebuah image yang memiliki keterkaitan antara image dan <map> itu sendiri. Tag <map> mempunyai beberapa element <area> yang digunakan untuk mendefinisikan area mana saja yang dapat kita klik.

Attribute Shape pada element area

Di dalam tag <area> ada atribut html yang bernama shape, shape ini berguna untuk menandakan jenis area yang ingin dipetakan. Ada 2 jenis shape yaitu rect (untuk area segiempat) dan circle (untuk area lingkaran) kamu bisa pilih object apa yang ingin kamu petakan.

Attribute Coords pada element area

Coords adalah atribut html yang berguna untuk menentukan sudut dan batasan area yang bisa kamu klik. Untuk shape berjenis rect akan memiliki nilai Coords = x1, y1, x2, y2.

x1 & y1 untuk sudut kiri atas, sedangkan x2 & y2 dimulai dari sudut kanan bawah. Circle memiliki pola Coords = x, y ,r.

Browser yang mendukung element map

1. Google Chrome
2. Internet Explorer (IE)
3. Mozilla Firefox
4. Safari
5. Opera

browser-support-image-map

Sedikit catatan yang mesti kamu perhatikan ketika akan menggunakan tag <map>, tag ini menggunakan HTML5 pastikan id atribut <map> memiliki nama yang sama dengan nama atribut nya.

Contoh pada gambar dibawah ini saya memiliki map name = “planetmap” dan kemudian pada image saya tambahkan atribut usemap=”#planetmap”

html-image-map-thumbnail-usemap

Sebelum ke bagian project inti saya akan bagi menjadi beberapa bagian artikel. (iwn)

Bersambung ke part 2..

Leave a Reply

Your email address will not be published. Required fields are marked *