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 :

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.

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.

<script type="text/javascript">
	$(document).ready(function(){	
			/* Start Map Controls*/
			jQuery("#map-container area").mouseover(function(){
				var regionMap = '.'+$(this).attr('id')+'-map';				
				jQuery(regionMap).css('display', 'inline');
			}).mouseout(function(){
				var regionMap = '.'+$(this).attr('id')+'-map';
				// Check if a click event has occured and only change the Region hover state accodringly
				if (! jQuery(regionMap).hasClass('selected')) {
					jQuery(regionMap).css('display', 'none');
				}
			});
			jQuery("#map-container area").click(function(){
				jQuery('#map-container img.region').removeClass('selected').css('display', 'none');
				jQuery('#practice-container ul').removeClass('selected').css('display', 'none');
				
				var regionMap = '.'+$(this).attr('id')+'-map';				
				jQuery(regionMap).addClass('selected').css('display', 'inline');				
			});
			/* End Map Controls*/
	});
</script>

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 :

<area shape="poly" coords="77,32,111,24,129,56,150,72,167,71,181,63,188,72,193,84,182,82, 175,91,180,108,168,129,151,129,148,143,106,144,103,136,110,131,110,118,81,103" href="#" title="Jakarta Barat" id="jkb">

Cocokkan dengan gambar hover dengan kode :

<img style="display: none; width:400px; height:300px; background:url('jakarta.png'); background-position:-401px -1px;" src="transparentMap.gif" class="region jkb-map" alt="Jakarta Barat">

Sehingga didapat kode lengkap seperti ini :

<div id="map-view-container">
		<div id="map-container">
		<img src="transparentMap.gif" alt="" usemap="#regionMapView" class="map" border="0" height="300" width="400">
		<map name="regionMapView" id="regionMapView">
			<area shape="poly" coords="77,32,111,24,129,56,150,72,167,71,181,63,188,72,193,84,182,82, 175,91,180,108,168,129,151,129,148,143,106,144,103,136,110,131,110, 118,81,103" href="#" title="Jakarta Barat" id="jkb">
			<area shape="poly" coords="120,28,153,39,164,56,177,54,175,43,180,39,185,52,208,50,237, 32,247,41,269,41,272,33,296,32,294,44,288,49,293,53,292,62,270,69, 262,86,271,97,268,105,253,109,201,63,188,65,182,60,151,66,132,50" href="#" title="Jakarta Utara" id="jku">
			<area shape="poly" coords="198,67,231,93,233,112,216,117,209,125,188,121,186,135,174,140, 172,132,186,110,180,89,186,87,197,88,191,70" href="#" title="Jakarta Pusat" id="jkp">
			<area shape="poly" coords="121,147,152,145,157,131,168,132,172,146,190,138,191,123,207, 130,218,146,217,186,208,197,215,222,208,227,202,226,203,242,199,246, 199,261,187,263,179,270,164,268,165,254,172,245,174,248,173,228,152, 223,153,208,128,187,131,164" href="#" title="Jakarta Selatan" id="jks">
			<area shape="poly" coords="236,97,249,112,273,108,277,100,271,89,280,89,283,94,302,86, 318,86,316,124,292,147,290,168,273,168,269,187,258,191,259,208, 269,215,265,248,270,249,267,268,258,279,244,279,229,271,228,263, 217,257,207,239,204,231,219,227,219,220,212,200,222,190,223,144, 213,127,221,118,236,117" href="#" title="Jakarta Timur" id="jkt">
		</map>	
		<img style="display: none; width:400px; height:300px; background:url('jakarta.png'); background-position:-401px -1px;" src="transparentMap.gif" class="region jkb-map" alt="Jakarta Barat">
		<img style="display: none; width:400px; height:300px; background:url('jakarta.png'); background-position:-1px -301px;" src="transparentMap.gif" class="region jku-map" alt="Jakarta Utara">
		<img style="display: none; width:400px; height:300px; background:url('jakarta.png'); background-position:-401px -301px;" src="transparentMap.gif" class="region jkp-map" alt="Jakarta Pusat">
		<img style="display: none; width:400px; height:300px; background:url('jakarta.png'); background-position:-1px -601px;" src="transparentMap.gif" class="region jks-map" alt="Jakarta Selatan">
		<img style="display: none; width:400px; height:300px; background:url('jakarta.png'); background-position:-401px -601px;" src="transparentMap.gif" class="region jkt-map" alt="Jakarta Timur">
		<img src="jakarta.jpg" class="regionBg">
		</div>
			<div class="clearboth"> </div>
	</div>

Download File