Bismillah. Alhamdulillah. Berhenti sejenak dalam mempelajari Facebook API dan kembali ke dunia jQuery. Beberapa saat yang lalu Blogger Tune-Up pernah membahas tentang penggunaan tag HTML Maps Area Coords. Pada artikel kali ini Blogger Tune-Up mencoba menyederhanakan fungsi tag HTML Maps Area Coords dengan menulis sebuah plugin jQuery. Plugin ini memudahkan kita dalam memasukan koordinat XY kedalam peta. Ditambahkan beberapa tambahan mark (penanda) dan tooltip agar tampilan menjadi lebih bagus dan menarik. Bagaimana menggunakannya? Lanjutkan...
Deksripsi
jQuery Image Maps digunakan sebagai metode lain dalam mengganti fungsi-fungsi tag HTML Maps Area Coords. Kode jQuery utama yang digunakan dalam membuat plugin Image Maps adalah jQuery.data(). jQuery.data() akan melakukan pemeriksaan data pada koordinat XY yang dimasukan kedalam peta. Sehingga memudahkan kita dalam menentukan titik koordinat XY. Berbeda halnya dengan tag Coords yang mengharuskan kita menentukan titik koordinat XY lebih dari satu untuk sebuah area, dengan jQuery Image Maps kita cukup memasukan satu titik koordinat XY. Pada saat halaman diload sebuah markah atau penanda ditambahkan pada area peta dengan bentuk yang bisa disesuaikan, kita bisa menggunakan border atau icon sebagai penunjuk lokasi pada map, satu hal yang tidak bisa diterapkan pada tag HTML Maps Area Coords. Pada saat mouse hover atau berada diatas markah, sebuah tooltip yang berisi informasi keluar diatas atau dibawah markah. Posisi dan efek tooltips bisa kita atur sesuai dengan keinginan. Luas area maps atau peta secara otomatis akan menyesuaikan dengan luas (panjang dan lebar) gambar sehingga kita tidak perlu menentukan luas area map.
Kekurangan dan Kelebihan
Plugin jQuery Image Maps ini jelaslah masih mengandung banyak kekurangan, anda bisa saja kemudian memodifikasi dan menambahkan fungsi-fungsi baru untuk menghasilkan tampilan yang lebih sempurna. Beberapa kekurangannya adalah:
- Tidak menggunakan tag HTML Maps Area Coords sesuai standar W3C, sehingga ada kemungkinan tidak lolos validasi (silahkan periksa sendiri).
- Untuk membuat area polygon masih rumit, karena masih mengandalkan kode CSS3.
- Baru diperiksa menggunakan framework jQuery versi 1.7.2 sehingga ada kemungkinan tidak bekerja normal pada versi sebelumnya (silahkan periksa sendiri).
- Pada IE 8 tampilan tooltips tidak sempurna namun itu karena IE 8 belum mampu merender CSS3 dengan sempurna. Bukan kesalahan pada plugin.
- Jika menemukan kelemahan, bug atau perbaikan lain silahkan tinggalkan pada komentar.
- Cukup satu titik koordinat XY untuk menentukan suatu area pada peta dengan luas yang bisa kita atur dengan mudah pada kode CSS.
- Integrasi antara gambar dengan peta dilakukan secara otomatis oleh Plugin.
- Area koordinat dalam peta bisa diberi mark atau penanda sesuai dengan yang kita inginkan. Bisa menggunakan rectangle, circle, rounded, polygon atau pun image (icon).
- Dilengkapi tooltip yang akan keluar ketika mouse hover pada markah atau penanda.
- Ukuran file plugin sangat kecil hanya 950 byte (versi minified).
- Silahkan temukan sendiri kelebihan lainnya.
Skenario HTML
Dibawah ini adalah kode HTML yang digunakan sebagai area peta:<div id="peta">Hal yang harus diperhatikan pada skenario HTML ini adalah:
<img width="620" height="346" src="peta.jpg" alt="Peta"/>
<!-- Awal Area Satu -->
<div class="penanda atas" data-posx="255" data-posy="70">
<!-- Awal Isi Tooltips -->
<h2>iMac</h2>
<ul>
<li><b>Harga:</b> Rp 24.000.000</li>
<li><b>Tahun Produksi:</b> 2020</li>
</ul>
<!-- Akhir Isi Tooltips -->
</div>
<!-- Akhir Area Satu -->
<!-- Area Dua dan seterusnya -->
</div>
- src pada tag img digunakan sebagai peta.
- Ukuran gambar akan lebih baik ditentukan dengan width dan height, tetapi tidak menggunakan properti juga tidak apa-apa.
- Tag alt pada gambar tidak berpengaruh pada plugin.
- class="penanda": hukumnya wajib, karena class ini akan diakses oleh plugin. Sedangkan class=" atas" digunakan untuk menentukan posisi tooltip, jika dikosongkan (misal; class="penanda") maka tooltip akan muncul dibawah mark atau penanda. Jika ditambahkan class "atas" (misal; class="penanda atas") maka tooltip akan muncul pada bagian atas penanda.
- data-posx="255": ganti nilai 255 sesuai dengan koordinat X pada gambar yang akan digunakan sebagai area.
- data-posy="70": ganti nilai 70 sesuai dengan koordinat Y pada gambar yang akan digunakan sebagai area peta.
- data-posx dan data-posy tidak boleh diganti, karena plugin akan mengambil nilai koordinat XY dari sini.
- Untuk menentukan titik koordinat XY peta silahkan merujuk pada artikel sebelumnya tentang HTML Maps Area Coords, hanya saja cukup mengambil satu titik koordinat XY untuk setiap areanya.
- Sedangkan tag yang berada didalam <div class="penanda" data-posx="" data-posy=""> adalah informasi yang akan muncul pada bagian tooltips. Anda bisa saja mengisinya dengan informasi yang sesuai dengan area pada peta.
Skenario CSS
Dibawah ini adalah skenario CSS yang digunakan untuk menentukan area penanda dan tooltips:#peta {
position: relative;
margin: 20px auto;
border: 1px solid #ccc;
}
.penanda {
display: none;
}
.area {
width: 32px;
height: 32px;
position: absolute;
}
.buble-up, .buble-down {
background: url(../img/mark.png) no-repeat 0 0;
}
.buble-down {
background-position: 0 -32px;
}
.buble {
display: none;
width: 200px;
cursor: pointer;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 10px;
left: 50%;
z-index: 999;
margin-left: -115px;
padding:15px;
color: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border: 1px solid #ccc;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.buble::after {
content: '';
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
border-bottom: 10px solid #ebf3fc;
border-left: 10px solid transparent;
border-right :10px solid transparent;
}
.buble-down .buble {
bottom: 12px;
top: auto;
}
.buble-down .buble::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #dce9f9;
}
.buble h2 {
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
margin: 0 0 10px;
text-align: center;
}
.buble ul {
margin: 0;
padding: 0;
list-style: none;
}
Kode diatas tidak akan dijelaskan mendetail, jadi silahkan dipelajari sendiri. Namun ada bagian yang bisa anda modifikasi untuk menentukan bentuk atau jenis penanda, yaitu:
.area {
width: 32px;
height: 32px;
position: absolute;
}
.buble-up, .buble-down {
background: url(../img/mark.png) no-repeat 0 0;
}
.buble-down {
background-position: 0 -32px;
}Silahkan kode diatas dimodifikasi sesuai dengan kebutuhan.Skenario jQuery
Secara default skenario jQuery ditulis seperti dibawah ini:$('#peta').imgMaps();#peta diambil dari area yang akan digunakan sebagai peta. Perhatikan skenario HTML yang menggunakan id="peta". Anda bisa saja mengganti #peta sesuai dengan keinginan namun perhatikan bahwa id tersebut digunakan sebagai id area peta.
Secara lengkap kode jQuery ditulis seperti dibawah ini:<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
<script type='text/javascript' src='URL/jquery.imgmaps.min.js'/>
<script>
$(document).ready(function(){
$('#peta').imgMaps();
});
</script>
Silahkan letakan kode diatas pada bagian atas tag </head> atau tag </body> pada halaman situs anda. Sedangkan untuk konfirgurasi tambahan anda bisa melakukan modifikasi kode jQuery menjadi seperti ini:
$('#peta').imgMaps({
speed: 250,
titik: 'penanda'
});- speed digunakan untuk menentukan kecepatan tampil tooltips, semakin kecil nilainya semakin cepat tampilannya. Efek yang digunakan adalah efek fade.
- titik digunakan untuk menentukan class penanda, perhatikan class="penanda" pada skenario HTML diatas.
Kesimpulan
Plugin jQuery Image Maps bermanfaat bagi anda yang biasanya membuat situs sebagai sarana jual beli online. Anda akan dengan mudah untuk menentukan titik lokasi agen atau area dealer dari toko anda. Jika merasa tidak puas dengan fungsi plugin jQuery ini, silahkan lakukan modifikasi agar plugin ini bekerja sesuai dengan keinginan anda. Jika anda tidak keberatan, silahkan kirim informasi kepada author apabila ditemukan bug, perbaikan atau pengembangan pada plugin ini. Selamat mencoba dan semoga berhasil. Happy Blogging :)
