javascript - 即时创建链接区域

Question

我想创建一个带有链接图的图像。该地图将包含许多必须经常更改的区域。我不想每隔几秒钟重新创建一次区域，我只想在用户真正点击图像时创建它们。

我希望通过在mousedown触发事件后创建区域来实现这一点-但这似乎不起作用（未处理对新创建区域的单击）。

到目前为止我的javascript代码（小提琴）：

$(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

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

查看更新的小提琴：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>