Membuat Peta Jakarta denga Hover Effect (jQuery)

Posting sebelumnya kita membahas bagaimana fungsi tag map untuk memetakan sebuah gambar pada area tertentu. Sekarang kita akan mencoba untuk membuat sebuah peta daerah dengan memberikan efek hover ketika kita menyorot area tertentu. Sebagai contoh kita akan membuat sebuah peta DKI Jakarta yang terdiri dari lima daerah yakni Jakarta Utara, Jakarta Pusat, Jakarta Timur, Jakarta Selatan dan Jakarta Barat. Berbekal kemampuan dibidang olah grafis kita bisa membuatnya dengan Corel Draw ataupun Photoshop. Bagi yang kesulitan tenang saja, saya sertakan contohnya disini. Selain gambar peta yang akan kita olah tentu saja kita juga merlukan file jquery dan kode javascript untuk menjalankan tugasnya masing-masing.

Membuat peta dan efek hover

Buat peta Jakarta terlebih dahulu dengan ukuran 400 x 300 px seperti ini :

jakarta-full

Kemudian buat juga efek hovernya dengan memberi warna yang berbeda pada tiap daerah, dimana setiap daerah digeser 400px ke kiri kanan atau 300px ke atas bawah seperti ini dalam format png transparan.

jakarta-part

Memanggil Jquery dan menambahkan kode javascript.

Panggil jquery, style.css dan tambahkan javascript dibawah ini. Sebagai tambahan jika ingin memberikan tooltip gunakan jquery qtip seperti pada contoh file yang disertakan.

Membuat Area menggunakan tag Map

Gunakan script map seperti biasa dengan atribut shape polygonal dan koordinat yang sesuai untuk tiap daerah dan tambahkan atribut id untuk menampilkan hover sesuai dengan gambar hover yang diinginkan pada tag img. Misalnya area Jakarta Barat dengan kode :

Cocokkan dengan gambar hover dengan kode :

Sehingga didapat kode lengkap seperti ini :

Download File