Cara Membuat Peta di Sebuah Gambar
Halo teman-teman bertemu lagi di artikel saya, kali ini kita akan belajar cara membuat peta di sebuahgambar, biasanya ketika melihat peta dan ingin menuju sebuah peta indonesia kita klik atau pilih maka akan di bawa tempat peta indonesia itu, dandisini kita akan melakukannya dengan sebuah gambarjadi sebuah gambar kita akan buat peta, ketika posisigambar yang diklik kita akan menju ke link yang berbeda, oke simak terus ya teman-teman.
Atribut lain yang tersedia dalam tag <img> adalah usemap. Atribut ini digunakan untuk membuat image map, yakni memetakan bagian-bagian gambar untuk dijadikan sebagai link. Agar bisa menggunakan fitur ini kita membutuhkan bantuan tag <map> dan tag <area>. Kedua tag ini berfungsi untuk mendefenisikan ‘daerah’ yang akan menjadi link. Sebagai contoh, saya akan menggunakan gambar Bundaran_HI.jpg dan membuatnya menjadi
image map. untuk belajar cara membuat peta di sebuah gambar, Di dalam gambar tersebut terdapat pemandangan bundaran HI, Hotel Indonesia dan Busway. Saya akan membuat ketiga area ini dapat di-klik dan menuju ke halaman Wikipedia yang menjelaskan tentang masing-masing lokasi. Berikut adalah gambar daerah yang akan menjadi image map:
image map. untuk belajar cara membuat peta di sebuah gambar, Di dalam gambar tersebut terdapat pemandangan bundaran HI, Hotel Indonesia dan Busway. Saya akan membuat ketiga area ini dapat di-klik dan menuju ke halaman Wikipedia yang menjelaskan tentang masing-masing lokasi. Berikut adalah gambar daerah yang akan menjadi image map:
Dapat anda lihat, saya menandai 3 daerah, yakni Bundaran HI dengan lingkaran kuning, HotelIndonesia dengan persegi merah, dan busway dengan persegi hijau. Berikut adalah kode HTML untuk membuat image map tersebut:
Saya menggunakan tag <img> seperti biasa, namun kali ini dengan tambahan atribut usemap=”#map”. Atribut ini berfungsi untuk ‘mengaitkan’ gambar dari tag <img> dengan ‘peta gambar’ yang berada pada tag <map>.
Tag <map> yang berada setelah tag <img> memiliki atribut name=”map”. Nilai atribut ini harus sesuai dengan nilai dari atribut usemap pada tag <img>. Sebagai contoh, jika dalam tag <img> saya mengubah atribut usemap=”#map_punya_saya”, maka di dalam tag <map> juga harus terdapat atribut name=”map_punya_saya”. Dengan demikian kedua tag ini akan saling terhubung.
Selanjutnya, di dalam tag <map> terdapat tag <area>. Tag <area> digunakan untuk menandai bagian-bagian dari gambar. Karena saya akan membuat 3 daerah, saya menggunakan 3 tag <area>.
Pada masing-masing tag <area> terdapat atribut shape, coords, href, dan title.
Atribut shape pada tag <area> digunakan untuk membuat bentuk area. Nilai yang bisa digunakan adalah rect, circle, poly dan default. Nilai ini berpasangan dengan atribut coords yang berfungsi menentukan titik-titik area.
Atribut shape=”rect” akan membuat bentuk area persegi panjang, shape=”circle” untuk membuat lingkaran, shape=”poly” untuk membentuk poligon (area dengan bentuk sembarang), dan shape=”default” akan membuat seluruh bidang gambar menjadi area.
Tag <map> yang berada setelah tag <img> memiliki atribut name=”map”. Nilai atribut ini harus sesuai dengan nilai dari atribut usemap pada tag <img>. Sebagai contoh, jika dalam tag <img> saya mengubah atribut usemap=”#map_punya_saya”, maka di dalam tag <map> juga harus terdapat atribut name=”map_punya_saya”. Dengan demikian kedua tag ini akan saling terhubung.
Selanjutnya, di dalam tag <map> terdapat tag <area>. Tag <area> digunakan untuk menandai bagian-bagian dari gambar. Karena saya akan membuat 3 daerah, saya menggunakan 3 tag <area>.
Pada masing-masing tag <area> terdapat atribut shape, coords, href, dan title.
Atribut shape pada tag <area> digunakan untuk membuat bentuk area. Nilai yang bisa digunakan adalah rect, circle, poly dan default. Nilai ini berpasangan dengan atribut coords yang berfungsi menentukan titik-titik area.
Atribut shape=”rect” akan membuat bentuk area persegi panjang, shape=”circle” untuk membuat lingkaran, shape=”poly” untuk membentuk poligon (area dengan bentuk sembarang), dan shape=”default” akan membuat seluruh bidang gambar menjadi area.
bagaimana sangat menarik ya teman-teman walaupun caranya cukup banyak, saya kira wajib dicoba dan cukup sekian dulu kita belajar cara membuat peta di sebuah gambar, semoga bermanfaat dan sampai jumpa di artikel selanjutnya terimakasih.
Tidak ada komentar:
Posting Komentar