Question

我需要做的是在添加地图时动态地将区域标签写入地图，这样当我点击它们时它们会触发一个功能。

    <img src="out.jpg" usemap="#mapmap"/>
    <map name="mapmap">
        <area id="1" shape="rect" coords="75,300,125,400" onclick="writeDiv(this.id)"/>
        <area id="2" shape="rect" coords="175,300,225,400" onclick="writeDiv(this.id)"/>
        <area id="3" shape="rect" coords="275,300,325,400" onclick="writeDiv(this.id)"/>
    </map>

如果我知道区域将会是什么，这正是我所需要的。但是，我需要动态加载它们，因为用户添加了更多内容并且我已经尝试过（在脚本标记中）：

    $("<img src=\"out.jpg\" usemap=\"#mapmap\"\/>").appendTo('body');
        $("<map name=\"mapmap\">").appendTo('body');
            $("<area id=\"1\" shape=\"rect\" coords=\"75,300,125,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
            $("<area id=\"2\" shape=\"rect\" coords=\"175,300,225,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
            $("<area id=\"3\" shape=\"rect\" coords=\"275,300,325,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
        $("<\/map>").appendTo('body');

哪个会好的，因为我仍然可以围绕图像格式化我的页面的其余部分，除了它不能像你期望的那样工作。我已经测试了

    $("<div id=\"test\">testing text<\/div>").appendTo('body');

并且可以将文本写入页面正文的底部。

那么，有没有办法让这个工作，或者是它们之间的依赖关系并且总是搞砸了？如果你能完全想到另一种方式，我愿意接受建议。谢谢！

Answer 1

当您使用$('<tag ...>')时，jQuery会解析HTML并从中创建DOM元素。您要附加元素，而不是标签。像这样添加<map ...>会创建一个<map>元素并附加它，如果你在附加后转储生成的HTML，它将在文档中显示</map>标记和所有内容。

<area>元素必须进入<map>元素，而不是正文，才能使它们起作用（通常，文档仍然是有效的HTML）。

var $map = $('<map name="mapmap">').appendTo('body');
$('<area id="1" shape="rect" coords="75,300,125,400" onclick="writeDiv(this.id)" />').appendTo($map);
$('<area id="2" shape="rect" coords="175,300,225,400" onclick="writeDiv(this.id)" />').appendTo($map);
$('<area id="3" shape="rect" coords="275,300,325,400" onclick="writeDiv(this.id)" />').appendTo($map);
// Note, no $('</map>') -- the $('<map...>') already took care of that

如何使用javascript编写<map>和<area /> html标签？</map>

1 个答案: