请动态禁用区域地图

Question

如何动态禁用某个区域？举个简单的例子，假设我将单击一个特定的象限区域，并且该区域（不是整个地图）保持禁用状态，直到我单击一个单独的按钮输入。如果地图区域有一个“禁用”属性会很好......但我知道没有。谁能帮我解决一下？

    <img id="square_img" src="images/square.png" usemap="#square" class="chart_class">
    <map id="square_map" name="square">
        <area id="quadrant1" shape="poly"  class="area_class" coords="206,10, 300,10, 388,10, 388,100, 388,196, 300,196, 206,196, 206,100" href="#" title="Quadrant1"></area>
        <area id="quadrant2" shape="poly"  class="area_class" coords="13,10, 100,10, 194,10, 194,100, 194,196, 100,196, 13,196, 13,100" href="#" title="Quadrant 2"></area>
        <area id="quadrant3" shape="poly"  class="area_class" coords="13,208, 100,208, 194,208, 194,300, 194,387, 100,387, 13,387, 13,200" href="#" title="Quadrant 3"></area>          
        <area id="quadrant4" shape="poly"  class="area_class" coords="206,208, 300,208, 388,208, 388,300, 388,387, 300,387, 206,387, 206,300" href="#" title="Quadrant 4"></area>   
    </map>
<input type="button" value="restore"/>

我尝试使用$(this).attr('onclick','return false;'); - 没有用。

不过，我有一些想法：拥有一个与 coords 具有相同值的 coords_temp 属性。使用$('area').click()，我将coords 设置为0,0,0,0。如果我想再次启用它，我将使用coords_temp 中的值并将coords 设置为它。它有效，但如果假设我有很多地图区域，它不会造成这么多的开销吗？ 0,0,0,0 还不能点击吗？非常困难，但它仍然可以点击，对吧？谢谢。

Answer 1

我建议您点击后添加它 先把不想要的去掉

function addCoord(){
    var elem = '<area id="quadrant1" shape="poly"  class="area_class" coords="206,10, 300,10, 388,10, 388,100, 388,196, 300,196, 206,196, 206,100" href="#" title="Quadrant1"></area>';
    var addElementTo = document.getElementById("square_map");
    addElementTo.innerHTML=elem;
}

只需将函数添加到您的 onlclick 事件中即可。

请注意，我拿了第一个，因为我不知道您以后要添加哪个。