JezK

Edit File: index2.php

<?php include("header.php"); ?> 

<button id="show-back-btn" onclick="show_india_map();" class="hide">Back</button>
<div class="show-india-map">
	<img src="http://ddd.krify.com/nabfins11/wp-content/uploads/2017/02/Outreach.png" alt="" width="800" height="898" border="0" usemap="#Map" class="aligncenter size-full wp-image-4779" />
	<map name="Map" id="Map">
	
	</map>
</div>

<div id="mp-state" class="state-container hide">
	<?php include('mp.php'); ?>
</div>
<div id="tripura-state" class="state-container hide">
	<?php include('tripura.php'); ?>
</div>
 
 
 <?php include("footer.php"); ?>
 
 <div id="show-address-container" class="modal fade" role="dialog">
  <div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="address-heading">Betul</h4>
      </div>
      <div class="modal-body  blklists">
        <ul>
			<li id="addr-1">NABFINS Limited,</li>
			<li id="addr-2">Man Mandir Marriage Lawn,</li>
			<li id="addr-3">Sharda Nagar, </li>
			<li id="addr-4"> Ranipur Road, </li>
			<li id="addr-5">Betul-460 001</li>
         
        </ul>
      </div>
    </div>
  </div>
</div>
<script>
	var india_map_html='\
	<area shape="poly" coords="244,688,245,694,253,697,259,705,260,711,268,709,276,713,276,718,279,724,284,727,287,731,291,736,296,737,302,738,307,736,312,732,316,729,322,729,326,726,332,721,331,713,331,695,330,685,330,672,334,665,339,655,348,653,354,651,358,655,361,651,363,642,369,635,377,635,385,635,391,632,393,627,395,621,397,615,400,609,408,608,408,605,414,604,420,601,425,597,430,591,434,585,440,580,445,577,450,571,456,566,461,561,467,555,461,558,457,561,450,565,443,563,438,561,434,558,432,565,426,567,423,571,417,581,415,579,409,582,404,579,402,576,400,588,394,590,388,592,384,601,378,603,379,609,372,613,368,616,360,618,353,624,347,621,347,630,344,632,339,631,338,627,335,635,331,635,325,634,318,637,313,639,308,647,303,649,298,653,291,653,282,655,277,661,270,661,260,659,252,654,249,656,248,662,248,672,249,684,244,685,250,678" href="ap.php" class="show-state" />\
	<area shape="poly" coords="223,786,225,791,228,794,234,798,236,804,237,811,237,817,238,822,246,823,249,828,249,833,250,841,252,847,252,853,250,860,250,867,246,873,247,879,247,886,250,892,256,892,262,889,267,884,271,877,275,868,277,862,284,860,295,858,294,851,295,845,301,840,304,833,306,826,311,823,318,822,322,821,322,815,320,808,318,802,323,798,322,794,320,789,321,784,319,779,314,773,317,770,322,768,328,766,329,764,329,759,333,754,333,748,334,743,336,734,335,726,330,732,326,737,320,738,316,739,311,741,306,745,298,744,294,747,289,752,283,756,273,753,264,754,264,761,266,767,267,775,262,775,259,780,253,782,248,785,242,783,236,787,231,789" href="" class="show-state" />\
	<area shape="poly" coords="239,885,242,881,241,875,241,871,239,865,240,859,246,854,242,850,238,844,239,838,241,830,235,831,230,827,227,818,228,811,226,804,224,801,218,796,214,792,211,784,215,782,211,779,207,779,202,774,199,772,193,767,187,760,179,752,183,760,184,766,189,775,195,782,199,789,205,800,210,812,215,823,218,834,222,844,225,856,221,855,224,861,228,870,233,875,232,879,236,883" href="kerala.php" class="show-state" />\
	<area shape="poly" coords="159,679,162,684,164,687,167,693,167,696,169,703,170,710,173,716,176,723,176,729,176,733,178,741,181,747,187,748,193,754,197,760,200,766,206,768,212,773,222,778,230,782,235,777,242,775,248,775,253,773,257,769,252,764,252,757,254,752,257,748,263,744,271,744,280,741,283,737,274,730,269,722,267,718,265,724,261,723,258,724,251,724,249,721,247,725,241,725,238,720,237,714,236,706,236,702,232,693,231,686,231,680,231,673,234,670,238,673,239,667,237,662,240,655,244,647,252,644,251,636,249,626,250,620,249,612,253,607,253,599,256,592,257,584,254,583,248,586,246,589,239,595,231,602,228,605,223,614,216,613,209,612,204,622,197,623,190,625,182,624,177,629,172,634,166,636,169,643,167,649,165,660,162,674,164,668" href="karnataka.htm" class="show-state" />\
	<area shape="poly" coords="126,520,125,526,124,529,125,537,127,542,128,550,131,555,128,566,129,575,132,581,132,593,136,601,138,611,139,622,137,630,138,636,141,642,144,648,148,651,153,650,161,651,161,642,158,630,160,627,163,624,171,624,177,622,181,618,187,614,193,615,199,611,199,606,203,602,210,602,215,603,220,604,225,600,227,596,232,591,237,589,238,581,244,580,250,577,251,573,259,569,263,563,262,556,266,549,271,544,274,539,277,537,279,531,282,527,292,529,298,532,305,536,311,536,317,539,324,538,330,541,332,545,332,553,335,561,337,555,339,549,342,545,347,543,345,537,337,535,341,529,339,522,338,515,338,508,340,500,341,493,339,486,335,485,329,485,325,484,318,484,307,481,313,481,302,483,296,485,286,486,281,484,273,490,265,489,258,487,253,481,247,479,243,482,242,487,239,492,238,492,230,494,221,497,213,491,206,487,202,490,191,487,187,482,183,480,176,478,173,467,167,469,163,471,169,476,168,481,164,487,158,487,157,489,160,496,161,504,156,506,148,510,145,517,135,522,141,522,130,522" href="maharasta.php" class="show-state" />\
	<area shape="poly" coords="274,327,269,332,263,335,255,339,250,342,244,347,238,352,239,358,246,362,255,362,261,365,263,370,258,372,250,376,249,381,252,387,250,394,248,400,239,405,225,404,221,412,215,414,207,416,203,409,203,402,204,395,209,387,201,386,195,386,188,389,190,392,193,397,193,402,193,405,191,412,191,418,187,422,185,428,181,435,176,443,172,450,168,458,171,458,177,461,181,467,186,473,193,476,202,478,209,479,219,481,226,485,231,487,237,479,240,474,248,471,255,469,261,471,267,475,269,479,275,480,279,475,283,473,287,474,294,478,300,476,306,473,313,472,321,474,329,475,337,476,343,479,349,480,350,472,352,463,354,454,361,450,369,448,376,445,377,440,379,435,384,430,384,427,378,426,372,420,372,417,372,410,377,403,385,403,394,404,402,405,402,399,401,391,393,390,386,390,382,386,377,380,370,379,367,382,361,385,355,387,349,380,344,381,337,380,335,375,335,369,332,374,327,378,320,378,310,379,301,375,295,367,302,382,306,387,308,398,299,402,296,404,289,404,283,400,278,395,278,387,279,379,278,373,281,366,282,357,285,354,293,353,297,348,299,340,300,330,296,324,287,327,280,328,286,322,295,324" href="mp.php" data-state-id="mp" class="show-state" />\
	<area shape="poly" coords="367,454,364,461,361,468,356,474,354,483,350,492,349,498,349,504,349,514,350,525,351,535,359,542,356,552,346,555,342,562,345,568,354,573,355,578,358,580,364,588,372,588,373,583,378,575,382,570,388,563,392,557,387,544,384,534,380,528,384,523,391,523,399,526,399,519,396,513,397,507,398,498,405,491,412,487,418,484,425,480,428,469,431,460,434,453,441,450,444,441,449,437,443,433,441,425,436,422,435,416,431,413,428,410,425,406,420,410,413,410,407,412,395,413,384,413,382,417,391,422,395,432,390,439,386,446,383,450,376,454" href="chattisgarh.php" class="show-state" />\
	<area shape="poly" coords="430,396,433,403,437,410,440,414,448,416,447,424,448,426,453,431,458,434,456,441,453,449,459,450,464,448,468,447,476,449,479,455,484,456,489,456,499,458,497,453,498,447,500,443,507,444,515,448,511,444,519,453,510,439,505,435,496,430,492,425,492,420,496,416,501,413,508,413,514,412,517,407,524,404,531,402,537,399,540,392,545,386,544,375,545,371,544,365,537,367,535,374,531,382,530,384,521,392,521,387,517,389,511,394,502,388,497,383,493,384,488,389,483,392,478,394,468,397,459,392,463,396,458,398,452,396,448,393,440,392,433,394,431,390,473,394,526,387,534,369,533,376,505,396,495,393" href="Jarkhand.php" class="show-state" />\
	<area shape="poly" coords="650,393,648,397,645,403,648,407,649,415,653,417,656,416,661,422,663,419,661,413,661,407,662,401,664,396,669,396,670,390,670,385,669,381,664,384,662,387,656,390" href="tripura.php" class="show-state" data-state-id="tripura" />\
	<area shape="poly" coords="679,390,677,396,677,404,679,411,681,417,677,422,684,426,687,431,686,439,688,445,694,446,699,442,699,436,696,421,696,413,700,412,702,404,702,394,703,391,697,393,693,389,693,382,690,381,688,381,686,387" href="mizoram.php" class="show-state"  data-state-id="mizoram" />\
	';
</script>
<script>
	var $=jQuery;
	$(document).ready(function(){
		$('#Map').html(india_map_html);
		$('body').on('click','.show-state',function(event){
			event.preventDefault();
			$('#show-back-btn').removeClass('hide');
			var state_id=$(this).attr('data-state-id');
			$('.show-india-map').addClass('hide');
			$('.state-container').addClass('hide');
		
				$('#'+state_id+'-state').removeClass('hide');
				var map_html=nabfins_maps_data[state_id]['map_html'];
				$('#Map').html(map_html);
			
		});
		$('body').on('click','.show-address',function(event){
			event.preventDefault();
			var state_id=$(this).attr('data-state-id');
			var address_id=$(this).attr('data-address-id');
			
			var address=nabfins_maps_data[state_id]['addresses'][address_id];
			
			$('#show-address-container').find('#address-heading').html(address[5]);
			
			$('#show-address-container').find('#addr-1').html(address[0]);
			$('#show-address-container').find('#addr-2').html(address[1]);
			$('#show-address-container').find('#addr-3').html(address[2]);
			$('#show-address-container').find('#addr-4').html(address[3]);
			$('#show-address-container').find('#addr-5').html(address[4]);
			
			$('#show-address-container').modal('show');
		})
	});
	function show_india_map()
	{
		$('#Map').html(india_map_html);
		$('.show-india-map').removeClass('hide');
		$('.state-container').addClass('hide');
		$('#show-back-btn').addClass('hide');
	}
	
</script>