<script type="text/javascript">
jQuery(function()
{
var tableContent = '<span>Select Floor</span><span></span><span></span><span style="float:right;padding-top:-10px;"><a href="#"><img class="no_link" style="max-width: 30px;opacity:0.4;" src="images/navigation_icon.png"</a><br></span>';
jQuery('#tableContent').html(tableContent);
jQuery('.appt_floors').click(function(e)
{
var id = jQuery(this).attr('id');
//jQuery('.appt_floors').not("area[id=" + id + "]").data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
jQuery('.appt_floors').not("area[id=" + id + "]").data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
jQuery.ajax(
{
url:"table_content1.php?id="+id,
type:"POST",
dataType:"JSON",
success:function(data)
{
for (var i = 0; i < jQuery(data).length; i++)
{
var tableContent = '<span>Floor '+ data[i].appt_floor +' - </span><span>'+ data[i].configs_available +'</span><span> - '+ data[i].appt_status +'</span><span style="float:right;padding-top:-10px;"><span><a href="http://hauskart.com/mobile/floor'+id+'.php"><img style="max-width: 30px;" src="images/navigation_icon.png"</a></span>';
jQuery('#tableContent').html(tableContent);
}
}
});
});
});
</script>
My map areas
<map name="simple">
<area shape="poly" coords="836,638,837,624,833,624,834,597,813,596,813,537,834,532,690,526,635,523,497,517,420,535,384,533,347,545,300,558,250,573,280,574,278,620,250,626,249,632,249,658,382,639,489,630" id="1" class="appt_floors" data-maphilight="{"strokeColor":"ffffff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.6}">
<area shape="poly" coords="834,532,834,520,831,520,832,493,811,492,810,430,834,421,689,412,638,409,496,400,421,428,386,426,348,443,303,463,255,485,282,487,281,532,252,541,250,548,249,572,347,545,384,533,421,534,495,518,636,523,689,525,834,532" id="2" class="appt_floors" data-maphilight="{"strokeColor":"ffffff","strokeWidth":2,"fillColor":"90d558","fillOpacity":0.6}">
<area shape="poly" coords="834,422,833,314,824,314,689,302,639,298,492,284,476,293,422,323,388,319,350,342,304,369,255,398,283,399,283,441,254,454,252,486,301,464,348,443,387,426,422,428,489,403,498,400,638,410,765,417,834,420" id="3" class="appt_floors" data-maphilight="{"strokeColor":"ffffff","strokeWidth":2,"fillColor":"90d558","fillOpacity":0.6}">
<area shape="poly" coords="832,315,831,208,820,209,688,194,639,188,493,172,477,183,423,218,390,215,256,312,285,314,285,346,257,364,254,371,254,397,304,369,388,320,424,323,492,285,640,298,688,302,832,316" id="4" class="appt_floors" data-maphilight="{"strokeColor":"ffffff","strokeWidth":2,"fillColor":"fff000","fillOpacity":0.6}">
<area shape="poly" coords="831,208,829,97,478,50,459,47,357,136,258,223,260,231,287,234,286,256,258,279,256,286,256,313,389,215,425,218,493,173,651,190,831,210" id="5" class="appt_floors" data-maphilight="{"strokeColor":"ffffff","strokeWidth":2,"fillColor":"90d558","fillOpacity":0.6}">
</map>
Initially, all the areas are highlighted.When I click on one area, it should be highlighted and other areas should be disabled.With the above code, only the first click works. If I click any other area, nothing is highlighted.How can I solve this issue?