如何使用alwaysOn实现jquery map highlight？ [英] How to implement jquery map highlight with alwaysOn?
本文介绍了如何使用alwaysOn实现jquery map highlight？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<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?
推荐答案
您好，请参阅以下链接获取帮助，
http://davidlynch.org/projects/maphilight/docs/ [ ^ ]
http://stackoverflow.com/questions/26820684 / jquery-maphilight-set-area-to-alwayson-by-click [ ^ ]
http://www.sitepoint.com/highlight-image-map-area-hotspots-jquery/ [ ^ ]
Hi, please see the links below for help,
http://davidlynch.org/projects/maphilight/docs/[^]
http://stackoverflow.com/questions/26820684/jquery-maphilight-set-area-to-alwayson-by-click[^]
http://www.sitepoint.com/highlight-image-map-area-hotspots-jquery/[^]
这篇关于如何使用alwaysOn实现jquery map highlight？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
