javascript - 即时创建链接区域

Question

我想创建一个带有链接图的图像。该 map 将包含许多必须经常更改的区域。我不想每隔几秒重新创建这些区域，而是希望仅在用户真正点击图像时才创建它们。

我希望一旦触发 mousedown 事件就可以通过创建区域来实现这一点 - 但这似乎不起作用(未处理对新创建区域的点击)。

到目前为止我的 javascript 代码 ( fiddle ):

$(document).ready(function () {
    $('#overlayDiv').mousedown(function () {
        $('#image').click(function () {
            $('#linkmap').children().remove();
            $(document.createElement('area'))
                .attr("shape", "rect")
                .attr("onclick", "alert('click');")
                .attr("coords", "0,0, 400,400")
                .appendTo('#linkmap');
        });
    });
});

应该发生什么的“工作流程”

1. 点击图片
2. 删除所有现有区域
3. 该区域已重建
4. 在新区域处理点击

Answer 1

这对您不起作用，因为您的 map 标签中没有名称属性。

查看更新的 fiddle :http://jsfiddle.net/gFVVh/1/

<img src="https://www.google.de/logos/2013/henry_van_de_veldes_100th_birthday-1402005-hp.jpg" usemap="#linkmap" id="image" />
<map id="linkmap" name="linkmap"></map>