HTML, telah menyediakan fasilitas sederhana untuk membuat mapping sebuah gambar. Dengan menggunakan mapping gambar tersebut, dapat dikreasikan menjadi sebuah halaman yang memuat peta sederhana. Layanan HTML dalam menangani peta gambar adalah dengan menggunakan tag <map></map> yang dilengkapi dengan <area></area>. Tag MAP, terdiri dari beberapa pilihan, antara lain adalah untuk penandaan bujursangkar (rect), penandaan lingkaran (circle) dan penandaan poligon. Tag map ini membutuhkan gambar sebagai media yang akan ditandai. Sedangkan penunjuk tempat dapat menggunakan koordinat yang terdapat pada HTML source. Sintaks map dan area adalah sebagai berikut.
Secara khusus saya ingin membahas tentang peta. Peta dengan bentuk yang tidak teratur seperti bujursangkar (rectangular) ataupun lingkaran (circle) diatur dengan pola polygon, dimana setiap titik akan menghubungkan satu garis dengan garis yang lain. Pada contoh disini saya akan menggunakan sebuah peta Provinsi Daerah Istimewa Yogyakarta.
Selanjutnya saya telah memiliki data koordinat untuk gambar tersebut seperti berikut :
| ‘KulonProgo’ | ‘26,206,146,265,167,232,173,229,176,232,181,230,180,223,182,219,182,214,179,205,152,177,156,174,160,166,157,158,160,156,152,143,151,136,151,130,150,123,150,121,150,119,154,112,156,110,164,104,179,100,174,88,178,81,177,75,177,68,176,66,170,62,164,67,149,63,140,68,132,61,110,64,105,63,89,81,101,89,97,104,97,110,96,123,86,135,74,147,58,162,54,174,46,191,45,201,41,208,37,207,26,207’ |
| ‘KotaJogja’ | ‘227,137,226,146,224,157,224,161,227,169,235,169,241,171,247,172,249,168,253,174,258,173,258,165,254,149,228,137’ |
| ‘Sleman’ | ‘158,170,156,158,160,155,151,143,149,125,150,118,153,113,156,108,160,104,178,98,210,64,256,25,268,16,277,9,282,6,300,71,308,112,310,136,321,134,324,142,340,152,340,164,322,170,276,173,269,164,265,146,255,146,228,135,221,151,206,159,191,173,189,142,174,158,161,170,158,171’ |
| ‘Bantul’ | ‘148,264,166,232,178,226,175,195,152,176,169,168,177,161,180,154,188,147,187,163,189,174,196,175,205,168,208,160,217,155,222,152,226,145,223,160,227,168,236,171,248,172,249,169,258,172,259,164,254,151,267,150,268,167,276,175,286,170,304,170,324,173,308,177,296,193,302,207,310,211,311,225,309,240,300,240,299,254,295,253,293,246,289,250,286,243,280,250,267,256,256,254,256,260,238,256,229,260,216,273,220,286,148,264’ |
| ‘Gunungkidul’ | ‘221,286,215,272,224,267,228,261,237,259,254,260,254,255,264,257,277,252,283,245,285,242,288,251,298,245,307,238,310,232,311,226,312,220,311,213,310,211,300,202,296,195,298,189,302,182,309,179,323,177,326,173,340,165,339,160,340,154,342,148,345,152,346,146,361,148,361,155,362,156,371,155,402,151,405,156,411,150,414,146,415,154,439,155,436,146,452,156,463,168,469,161,479,163,481,188,470,221,463,287,477,321,482,349,483,365,493,366,497,360,505,352,498,368,501,380,509,372,511,389,488,386,442,390,436,389,438,383,433,382,420,379,375,358,263,320,223,289’ |
Jangan tanya lebih dulu darimana saya mendapat koordinat ini. Saya membuatnya :). Bagaimana membuatnya? Tentu ada postingan yang membahas JQuery dan Javascript lengkap dengan source codenya. Selanjutnya, mari kita buat peta sebagai demikian:
Hasilnya dapat dilihat pada halaman demo.
Kelamahan dari peta HTML ini adalah : belum support dengan zoom, dan dia bukan peta berbasis VEKTOR. Dengan beberapa tambahan fungsi khusus, fungsi zoom bisa digunakan. Untuk sementara kita belum menggunakan tooltip pointer untuk menunjukkan kota. Tapi setidaknya dari alt dan title telah dapat diketahui mouse kita sudah masuk area mana. Saya juga menggunakan event javascript ONCLICK untuk menunjukkan apakah yang diclick itu kota yang bersangkutan. Untuk posting selanjutnya akan saya posting tentang TOOL TIP, setelah itu barulah akan diposting bagaimana cara membuat koordinat peta. Tentu dengan Javascript dan JQuery…
wah, aku malah ngelu bacanya gara-gara gak paham bahas begituan 🙂
hehehe, karep e ming loro pakdhe, sakliyane nggo pangeling-eling, muga bisa migunani…
Roaming sih, meski ngerti dikit2. Dikiit banget. Aku masih suka takjub dengan bahasa HTML yang bisa jadi bentuk berbeda begitu tampil di layar lapie. Ajaib (saking gateknya).
ah mbak, sing jenenge alumni MP ki mesti paham hate-em-el kecuali bambang hahahaha… ntar rumah kita juga dahsyat kok mbak fungsi-fungsinya
Thx gan…web ane perlu ini.
Semoga Berguna ya gan! 😀
gan cara menentukan data koordinat itu dari mana ya kok bisa pas, apa ada tools tambahannya atau bagaimana ya
thxx
good idea
kalau tnpa di klik tooltip bisa keliatan bisa ga mas?
soalnya kadang pengunjung web tidak tahu kalau di dalam gambar ada tooltipnya
matur suwun
oh ya, terimakasih mas/mbak atas masukannya. Mungkin untuk hal itu ditambahkan informasi ya pada gambarnya atau yang diberikan tooltip tersebut. Dan memang lebih mudah menggonakan mouseover 🙂
oke terima kasih mas
lagi cari cari bikin tooltip banyak di satu gambar mas
kaya peta kalau di klik di area tertentu bisa muncul tooltip dan di area lainnya di dalam satu gambar
kalau dah sukses ajarin saya ya sob
mantap, ijin bookmark ya gan