JavaScriptでDOM操作関数を使用して文書に<map> -Elementを追加するにはどうすればよいですか？

私はHTML-ドキュメントに追加し、次のコードを使用して画像にリンクしてみてください：JavaScriptでDOM操作関数を使用して文書に<map> -Elementを追加するにはどうすればよいですか？

<!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>

それらをクリックすると画像がそのアラートに、テキストをリンクされた領域が含まれている必要があります。 Unformtunatlyエリアは表示されません。誰かが私の間違いを見つけますか？

出典

2012-04-13 R_User

'setAttribute（ 'onclick'、...）'は**悪い**です。 DOM要素があるため、コード文字列ではなく関数を渡す場合に適切なイベント処理を使用できます。 – ThiefMaster

まず、地図の識別子が一致しません。また、プロパティ名はuseMapであり、usemapではありません。代わりに

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

または

imgCol.useMap = "#" + mapCol.name;

を使用してください。また、ドキュメントにマップを追加する必要があります。

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

JSFiddle demonstration

出典

2012-04-13 20:58:23 Zeta

'' imgCol.setAttribute（ 'usemap'、 "＃" + mapCol.name）;と '' imgCol.usemap = "＃" + mapCol.name;の違いは何ですか？ –

最初に動作しますが、後者は動作しません。（あなたは 'imgCol.useMap = '＃' + mapCol.name;'を使う必要があります）。 – Zeta

私はこのことについてわからないんだけど、私はあなたがそれで子どもを割り当てる前に、文書にあなたのMAP -elementを追加すべきだと思います。新しい要素を作成することは、追加されていない要素にプロパティを作成することとは異なります。

出典

2012-04-13 20:59:24 Teemu

JavaScriptでDOM操作関数を使用して文書に<map> -Elementを追加するにはどうすればよいですか？

答えて

関連する問題