Web Anda Rusak/Kena Hack. Resiko Ranking SEO turun Drastis. Kami BISA Perbaiki Selengkapnya..

Arrow up
Arrow down

KURSUS WEB PRO

Kursus Pembuatan Web - Blog - Toko Online Tanpa Biaya..GRATIS!!

Kursus Web Gratis

kursus website toko online

Cara Mudah Membuat Image Map di Web

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".

cara buat image map html

3. Buat Area Hotspot dengan menggunakan "Polygon Hostpot Tool". Isikan URL Link, Target Link , dan Alt Link untuk Hostpot yang anda buat.

cara buat image map html

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".

cara buat image map html

cara buat image map html

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"

cara buat image map html

6. Copy pastekan kode Image map ke dalam file website anda.

cara buat image map html

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:

 

 

PELATIHAN WEBSITE & TOKO ONLINE


HANYA untuk maks 5 Orang Peserta

13-14 Mei: Pembuatan Web Joomla
19-20 Mei: Pembuatan Toko Online Prestashop
27-28 Mei: Pembuatan Toko Online Wordpress

Biaya:
Rp.1.500.000,- / Peserta

Gratis Domain,Hosting, WIFI, MODUL.

Programming Web

Jasa Hosting Murah Depok

Kursus Website Online Gratis
KANTOR PUSAT :

Mutiara Darussalam A3/11
Jl Pitara Raya DEPOK
Jawa-Barat
WA: 0817.5011.058
Telp: 0817.5011.058 , 0812.8711.5614
PIN BB: 584E1A57
---------------------------

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

Jika ada layanan kami yang ingin anda konsultasikan silahkan chatting dengan kami:

google plus kursus webtwitter kursus webpinterest kursus webLinkedin Kursus Web

Portofolio

mainan anak

fastpay depok

error handling toko online

jasa pembuatan kolam renang

jasa kontraktor bangunan jogja