如何在 JavaScript 中使用 DOM 操作函数将 <map>-Element 添加到文档中
How to add a <map>-Element to a document using DOM manipulating functions in JavaScript?
我尝试使用以下代码将 a 添加到 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>
图像应包含链接区域,单击它们时会提醒文本。不合时宜地,这些区域没有出现。有人发现我的错误吗?
首先,您的地图标识符不匹配。此外,属性名称是 useMap
,而不是 usemap
。用
imgCol.setAttribute('usemap',"#" + mapCol.name);
或
imgCol.useMap = "#" + mapCol.name;
相反。您还必须将地图添加到文档中:
/* ... */
imgColArea.appendChild(imgCol);
imgColArea.appendChild(mapCol);
/* ... */
JSFiddle 演示
我不确定这一点,但我认为您应该在文档中分配子元素之前将 MAP
-元素附加到文档中。创建新元素不同于为非追加元素创建属性。
相关文章:
- 使用promise和mongoose对文档进行排序
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- Ajax请求文档就绪会导致jquery加载缓慢
- MongoDB (php) - 以数组而不是多个属性的形式返回文档属性
- 谷歌文档表面引擎
- 来自文档或下一个静态父级的事件委派
- 如何将childNodes用于XML文档
- 文档就绪提供了错误的选择器高度
- 将当前用户的 ID 推送到 meteorjs 中集合/文档的内部数组
- 未捕获的语法错误:无法在“文档”上执行“查询选择器”
- BrowserId登录请求在文档加载时被调用
- 从Javascript和Php变量创建Html模板文档
- 如何通过谷歌应用程序脚本从谷歌文档中的位置确定命名范围
- 在jquery文档准备好之前加载Modernizr
- 如何判断何时将dom节点添加到文档中
- Rect.map():文档是否错误
- MongoDB使用Map Reduce插入来自其他集合的嵌入式文档
- 通过聚合框架或map/reduce将事件数据嵌入MongoDB中的文档
- 在CouchDB中使用Map-Reduce方法链接文档
- 使用futon map程序将couchdb中的两个不同文档连接起来