Image map di dalam website merupakan suatu gambar (image) yang dapat memiliki satu atau lebih area link yang bisa diklik. Gambaran sederhananya mungkin anda pernah melihat peta indonesia di suatu web dimana jika mouse kita arahkan ke pulau-pulau tertentu maka area pulau dalam gambar tersebut akan memiliki link yang mengarah pada link internal atau eksternal website.
Untuk membuat image map dengan kode HTML memang cukup rumit. Anda bisa menggunakan elemen <map> dan harus memetakan koordinat area hotspot yang bisa diklik dalam gambar. Jika area hotspot masih dalam bentuk sederhana misal lingkaran dan kotak mungkin masih mudah. Tapi lain halnya jika area hotspot yang ingin anda buat memiliki bentuk yang berlekuk-lekuk maka pastinya membutuhkan titik koordinat yang lumayan banyak untuk membentuk sebuah poligon.
Pada tutorial ini saya akan menunjukkan bagaimana membuat image map secara praktis dengan menggunakan Macromedia Firework. Yang harus anda siapkan adalah Gambar untuk dijadikan image map di website.
1. Buka software Macromedia Firework >> pilih menu “New” untuk membuat project image map.
2. Import Gambar dengan memilih menu “File >> Import”. Kemudian Pilih Gambar dan Klik tombol “Open” dan Klik pada tombol “Fit Canvas“.
3. Buat Area Hotspot dengan menggunakan “Polygon Hostpot Tool“. Isikan URL Link, Target Link , dan Alt Link untuk Hostpot yang anda buat.
4. Setelah selesai simpan project dalam format PNG. Selanjutnya lakukan proses “Export” gambar ke format “HTML“. Pada opsi Export, pilih “HTML & Images“. Pada opsi Slice, pilih “Export Slices“. Berikan tanda checklist pada opsi “Include area without slice” dan “Put images in subfolder“.
5. Klik tombol “Export“. Maka anda akan melihat hasilnya dalam format HTML. Bukalah file html tersebut menggunakan browser Chrome atau Mozilla. Selanjutnya klik kanan pada jendela browser, pilih menu “View Source Code“
6. Copy pastekan kode Image map ke dalam file website anda.
7. Selamat mencoba..!
Dengan cara ini maka anda dapat dengan cepat dan mudah membuat image map tanpa harus pusing menentukan koordinat titik titik poligon dalam gambar.
ARTIKEL TERKAIT:
- Cara Menampilkan Multichat Yahoo Messenger di satu PC
- Cara Mudah Menambahkan Widget Cek Ongkir dan Resi Tiki Jne Pos Indonesia
- Cara Menambahkan Audio Player ke Website
- Cara Melakukan Flush DNS Cache di PC Windows
- Tips Membuat Password Admin yang Aman
