How to add a <map>-Element to a document using DOM manipulating functions in JavaScript?
Question
I try to add a to an HTML-Document and link it to an image using the following code:
<!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>
The image should contain linked areas, that alert a text when clicking on them. Unformtunatly the areas do not show up. Does anyone find my mistake?
2 answers
solution1
3 ACCPTED 2012-04-13 20:58:23
First of all, your map identifiers mismatch. Also the property name is useMap , not usemap . Use
imgCol.setAttribute('usemap',"#" + mapCol.name);
or
imgCol.useMap = "#" + mapCol.name;
instead. You also have to add your map to the document:
/* ... */
imgColArea.appendChild(imgCol);
imgColArea.appendChild(mapCol);
/* ... */
solution2
0 2012-04-13 20:59:24
I'm not sure about this, but I think you should append your MAP -element to the document before assigning children in it. To create new elements differs from creating properties to a non-appended element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.