Fatal编程技术网
  • javascript/
  • 如何添加<；地图>-使用JavaScript中的DOM操作函数将元素添加到文档中？

如何添加<；地图>-使用JavaScript中的DOM操作函数将元素添加到文档中？

javascript html dom map

如何添加<；地图>-使用JavaScript中的DOM操作函数将元素添加到文档中？,javascript,html,dom,map,Javascript,Html,Dom,Map,我尝试使用以下代码将添加到HTML文档并将其链接到图像： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head> <title>Website</title> <script type="text/javascript"> fun

我尝试使用以下代码将添加到HTML文档并将其链接到图像：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
    <title>Website</title>
    <script type="text/javascript">
    function addArea(map, xstart, ystart, xende, yende, idCol, col) {
        area = document.createElement("area");

        area.shape  = "rect";
        area.coords = "" + xstart + ", " + ystart + ", " + xende + ", " + yende + "";
        area.href   = "#" + idCol;
        area.title  = col;
        area.alt    = col;
/*
        area.shape  = "\"rect\"";
        area.coords = "xstart + \", \" + ystart + \", \" + xende + \", \" + yende";
        area.href   = "\"#\" + idCol";
        area.title  = "col";
        area.alt    = "col";

*/      area.setAttribute(
            "onclick",
            "alert(\"Color: \" + col); return false;"
        );

        // append the area to the map
        map.appendChild(area);
    }

    function showMap() {
        idCol = "text";

        // generate the map
        mapCol      = document.createElement("map");
        mapCol.name = "map_" + idCol;
        mapCol.id   = "map_" + idCol;
        addArea(mapCol, 1, 1, 25, 13, idCol, "00FF00");
        addArea(mapCol, 25, 1, 49, 13, idCol, "00FF33");


        imgCol              = document.createElement("img");
        imgCol.src          = "https://www.google.de/images/srpr/logo3w.png";
        imgCol.width        = 275;
        imgCol.height       = 95;
        imgCol.style.border = "1px solid #000";
        imgCol.usemap       = "#name_und_raute_sind_notwendig_bunt_" + idCol;
        imgCol.alt          = "Farbe auswählen";

        imgColArea      = document.createElement("p");
        imgColArea.appendChild(imgCol);

        testcol = "ffffff";
        testlink    = document.createElement("a");
        testlink.appendChild(document.createTextNode("testlink"));
        testlink.setAttribute(
            "onclick",
            "alert(\"Color: \" + testcol); return false;"
        );

        document.getElementById("area").appendChild(imgColArea);
        document.getElementById("area").appendChild(testlink);

        alert("map added with " + mapCol.areas.length + " entries.");

    }


    </script>
</head>
<body onLoad="showMap()">
<div>
before
<div id="area"></div>
after
</div>
</body>


网站
函数addArea（map、xstart、ystart、xende、yende、idCol、col）{
面积=document.createElement（“面积”）；
area.shape=“rect”；
area.coords=“+xstart+”、“+ystart+”、“+xende+”、“+yende+”；
area.href=“#”+idCol；
area.title=col；
area.alt=col；
/*
area.shape=“\”rect\”；
area.coords=“xstart+\”、\“+ystart+\”、\“+xende+\”、\“+yende”；
area.href=“\”\\“+idCol”；
area.title=“col”；
area.alt=“col”；
*/area.setAttribute(
“onclick”，
“警报（\”颜色：\“+col）；返回false；”
);
//将该区域附加到地图上
地图.儿童（地区）；
}
函数showMap（）{
idCol=“text”；
//生成地图
mapCol=document.createElement（“map”）；
mapCol.name=“map_quo;”+idCol；
mapCol.id=“地图”+idCol；
addArea（mapCol，1,1,25,13，idCol，“00FF00”）；
addArea（mapCol，25,1,49,13，idCol，“00FF33”）；
imgCol=document.createElement（“img”）；
imgCol.src=”https://www.google.de/images/srpr/logo3w.png";
imgCol.width=275；
imgCol.height=95；
imgCol.style.border=“1px solid#000”；
imgCol.usemap=“#name_und_raute_sind_notwendig_bunt_”+idCol；
imgCol.alt=“Farbe auswählen”；
imgColArea=document.createElement（“p”）；
依附儿童（imgCol）；
testcol=“ffffff”；
testlink=document.createElement（“a”）；
appendChild（document.createTextNode（“testlink”））；
testlink.setAttribute(
“onclick”，
“警报（\”颜色：\“+testcol）；返回false；”
);
文件.getElementById（“区域”）.appendChild（imgColArea）；
document.getElementById（“区域”）.appendChild（testlink）；
警报（“添加了“+mapCol.areas.length+”条目的地图”）；
}
之前
之后
图像应包含链接区域，当单击这些区域时，会提示文本。不幸的是，这些区域没有出现。有人发现我的错误了吗？

首先，你的地图标识符不匹配。属性名称也是
useMap
，而不是
useMap
。使用

imgCol.setAttribute('usemap',"#" + mapCol.name);
或

相反。您还必须将地图添加到文档中：

/* ... */
imgColArea.appendChild(imgCol);
imgColArea.appendChild(mapCol);
/* ... */
首先，地图标识符不匹配。属性名称也是
useMap
，而不是
useMap
。使用

imgCol.setAttribute('usemap',"#" + mapCol.name);
或

相反。您还必须将地图添加到文档中：

/* ... */
imgColArea.appendChild(imgCol);
imgColArea.appendChild(mapCol);
/* ... */

我不确定这一点，但我认为您应该在文档中指定子元素之前，将
映射
-元素附加到文档中。创建新元素不同于为非附加元素创建属性。

我不确定这一点，但我认为您应该在文档中指定子元素之前，将
映射
-元素附加到文档中。创建新元素不同于创建非附加元素的属性。

imgCol.setAttribute（'usemap'，“#”+mapCol.name）之间的区别是什么和
imgCol.usemap=“#”+mapCol.name？首先有效，而后者无效；）。（您必须使用
imgCol.useMap='#'+mapCol.name；
）。
imgCol.setAttribute（'useMap'，“#”+mapCol.name）之间的区别是什么和
imgCol.usemap=“#”+mapCol.name？首先有效，而后者无效；）。（必须使用
imgCol.useMap='#'+mapCol.name；
）。
setAttribute（'onclick'，…）
不正确。您有一个DOM元素，因此可以在传递函数而不是代码字符串时使用适当的事件处理。
setAttribute（'onclick'，…）
不好。您有一个DOM元素，因此可以在传递函数而不是代码字符串时使用适当的事件处理。