Membuat Image Map Menggunakan GIMP
Image Map merupakan gambar yang di dalamnya terdapat area link. Dalam satu gambar Anda bisa membuat beberapa area link yang berbeda. Untuk lebih jelasnya, Anda bisa melihat contoh gambar di atas. Jika kita meng-klik Profil, otomatis pada browser kita akan terbuka halaman Profil KSU Pointer. Jika kita meng-klik SDM, otomatis pada browser kita akan terbuka halaman SDM KSU Pointer, dan demikian juga untuk menu-menu lainnya. Image Map bisa dibuat menggunakan GIMP. Klik di sini untuk mendowload GIMP.
Yang perlu Anda siapkan untuk membuat Image Map adalah file gambar. Untuk membuat file gambar, kita bisa menggunakan program sederhana seperti Microsoft Office Power Point atau Mindjet MindManager. Kedua program ini terbilang cukup mudah dan file gambar yang dihasilkan juga cukup bagus. Jika Anda ingin gambar Anda lebih menarik, Anda bisa membuat gambar .gif. Cara membuat gambar .gif bisa Anda lihat di sini.
Berikut adalah langkah pembuatan Image Map menggunakan GIMP:
1. Jalankan program GIMP. Klik File - Open.
2. Klik Filters - Web - Image Map.
3. Pilih bentuk shape area di sebelah kiri, tempatkan pada area yang ingin Anda beri link. Masukkan alamat link area gambar. Ada 3 pilihan area, rectangle, circle, atau polygon. Sesuaikan dengan area gambar Anda.
4. Setelah semua area yang Anda inginkan diberi link, klik View - Source. Copy kodenya, paste ke HTML post Anda.
5. Masukkan gambar ke blog Anda, ganti lokasi gambar pada kode HTML Anda sesuai dengan lokasi gambar yang Anda masukkan pada blog Anda.
Secara umum, kode HTML untuk membuat Image Map adalah sebagai berikut:
1. Obyek Persegi Panjang (Rect)
<img usemap=”#map name” src=”lokasi gambar” border=”0″ />
<map name=”map name”>
<area shape=”rect” coords=”x1, y1, x2, y2″ href=”tujuan link”></area>
</map>
2. Obyek Lingkaran (Circle)
<img usemap=”#map name” src=”lokasi gambar” border=”0″ />
<map name=”map name”>
<area shape=”circle” coords=”x, y, r” href=”tujuan link”></area>
</map>
3. Obyek Polygon
<img usemap=”#map name” src=”lokasi gambar” border=”0″ />
<map name=”map name”>
<area shape=”polygon” coords=”x1, y1, x2, y2, x3, y3″ href=”tujuan link”></area>
</map>
Map Name bisa diberi nama apa saja, namun pada gambar yang berbeda, map name juga harus berbeda. Lokasi gambar adalah lokasi dari gambar setelah Anda masukkan ke dalam blog. Tujuan link adalah link yang dituju ketika area gambar tersebut di-klik.
Bagaimana, mudah bukan? Selamat mencoba!
bagaimana cara menentukan koordinat yang kemudian bisa diletakkan didalam dokumen html, terimakasih.
Mbak Rera, dengan menggunakan program GIMP, koordinat titik bisa diketahui dengan meletakkan kursor di lokasi gambar yang ingin diketahui posisinya, kemudian di pojok kiri bawah otomatis akan terlihat koordinatnya.
Mbak Anida..
Petunjuk bagian nomor 2 itu apa tidak salah ya??
Seharusnya kan Filters - Web - Image Map, tetapi disitu tertulis Tools.
Terimakasih, berkat petunjuknya saya sekarang sudah bisa membuat link dengan cara image map.
Ternyata cukup mudah.
Ok, sudah saya ubah, thanks buat koreksinya ya…