爲地圖元素設置innerHTML

Question

我一直在這一段時間裏對此感興趣。在開始時它正在工作（儘管我可能只是想象它）。

這是一個基本的（或應該使用）具有多邊形區域元素的貼圖元素。在加載文檔的其餘部分後，地圖的區域元素應該添加到地圖中。這是通過javascript完成的，因此可以很容易地改變區域的數量（圓的楔形）以及圓的半徑。

//test.html body (points.js is included in head) 

<img src="http://www.placehold.it/600x600" usemap="#graphMap"> 
<map name="graphMap"></map> 
<script> 
    getPoints(); 
</script> 

//points.js 

function getX(radius, angle, num) { 
    return Math.round(radius * Math.sin(angle * (i) * Math.PI/180) + 298); 
}; 

function getY(radius, angle, num) { 
    return Math.round(radius * Math.cos(angle * (i) * Math.PI/180) + 298); 
}; 

function changePointColor(index) { 
    var points = document.getElementsByClassName('point'); 

    var style = points[index].getAttribute("style"); 
    style = style + 'background-color:green;'; 
    points[index].setAttribute("style", style); 
}; 

function getPoints() { 
    var wedges = 12.0; 
    var radius = 300.0; 
    var angle = 360.0/wedges; 

    var body = document.getElementsByTagName('body')[0]; 
    var map = document.getElementsByName('graphMap')[0]; 

    var out_points = []; 
    var in_points = []; 

    for (i = 0; i < wedges; i++) { 
    out_points.push(
     [ 
      getX((radius + 10), angle, i), 
      getY((radius + 10), angle, i) 
     ] 
     ); 

    in_points.push(
     [ 
      getX((radius - 100), angle, i), 
      getY((radius - 100), angle, i) 
     ] 
     ); 
    } 

    for (i = 0; i < wedges; i++) { (function(i) { 
    body.innerHTML += '<div class="point" style="top:' + out_points[i][1] + 'px;left:' + out_points[i][0] + 'px;background-color:blue;"></div>'; 
    body.innerHTML += '<div class="point" style="top:' + in_points[i][1] + 'px;left:' + in_points[i][0] + 'px;background-color:blue;"></div>'; 
    var mapHTML = '<area shape="poly" coords="'; 
    mapHTML += out_points[i].join() + ','; 
    mapHTML += out_points[(i+1) % wedges].join() + ','; 
    mapHTML += in_points[(i+1) % wedges].join() + ','; 
    mapHTML += in_points[i].join() + '" href="#" '; 
    mapHTML += 'alt="wedge' + i + '" title="wedge' + i + '"' 
    mapHTML += ' onclick="changePointColor(' + i + ')"' 
    mapHTML += '>' + "\n"; 
    map.innerHTML += mapHTML; 
    })(i);} 

    console.log(map) 
    console.log(map.innerHTML); 
}; 

這裏是the fiddle。

問題似乎是getPoints（）運行後map的innerHTML保持不變。我登錄的地圖元素的innerHTML在getPoints（結束）功能：

// console.log(map.innerHTML) output 

<area shape="poly" coords="298,608,453,566,398,471,298,498" href="#" alt="wedge0" title="wedge0" onclick="changePointColor(0)"> 
<area shape="poly" coords="453,566,566,453,471,398,398,471" href="#" alt="wedge1" title="wedge1" onclick="changePointColor(1)"> 
<area shape="poly" coords="566,453,608,298,498,298,471,398" href="#" alt="wedge2" title="wedge2" onclick="changePointColor(2)"> 
<area shape="poly" coords="608,298,566,143,471,198,498,298" href="#" alt="wedge3" title="wedge3" onclick="changePointColor(3)"> 
<area shape="poly" coords="566,143,453,30,398,125,471,198" href="#" alt="wedge4" title="wedge4" onclick="changePointColor(4)"> 
<area shape="poly" coords="453,30,298,-12,298,98,398,125" href="#" alt="wedge5" title="wedge5" onclick="changePointColor(5)"> 
<area shape="poly" coords="298,-12,143,30,198,125,298,98" href="#" alt="wedge6" title="wedge6" onclick="changePointColor(6)"> 
<area shape="poly" coords="143,30,30,143,125,198,198,125" href="#" alt="wedge7" title="wedge7" onclick="changePointColor(7)"> 
<area shape="poly" coords="30,143,-12,298,98,298,125,198" href="#" alt="wedge8" title="wedge8" onclick="changePointColor(8)"> 
<area shape="poly" coords="-12,298,30,453,125,398,98,298" href="#" alt="wedge9" title="wedge9" onclick="changePointColor(9)"> 
<area shape="poly" coords="30,453,143,566,198,471,125,398" href="#" alt="wedge10" title="wedge10" onclick="changePointColor(10)"> 
<area shape="poly" coords="143,566,298,608,298,498,198,471" href="#" alt="wedge11" title="wedge11" onclick="changePointColor(11)"> 

真的在我的智慧在這一個結束。我想我已經做了一個明顯的JavaScript或HTML錯誤。期待學習我的錯誤。

Answer 1

當您使用innerHtml將html附加到主體時，它正在重寫html，因此您獲取的地圖對象不再存在，這就是爲什麼地圖區域未被追加的原因。 （它已被新的html覆蓋 - + =意味着它獲取當前的html添加新的html，然後用它創建的新html覆蓋現有的html，因此您的地圖對象不再存在）。

你要麼需要獲取地圖每次都反對你做的innerHtml +=

like in this example

或追加這樣的div：

var elem = document.createElement('div'); 
//add attributes and styles to div here 
body.appendChild(elem); 

Example using appendChild

Answer 2

我認爲這取決於現代瀏覽器中圖像映射的實現方式。這是一個相當古老的技術（就HTML語法而言），而且它的用處不大。

從我可以告訴在Chrome中運行該特定的JSFiddle，修改頁面中的map元素導致瀏覽器創建該節點的克隆，並在其上設置內部HTML。您可以知道，因爲您記錄的map元素與DOM樹中的元素不是相同的map。它沒有父節點，也沒有偏移父節點。

在猜測，我會說這是鉻的故意行爲，以避免必須實現呈現器中所需的邏輯，使圖像映射動態可編輯。

不幸的是，解決方案可能是嘗試手動複製圖像映射的行爲，透明div也許。