如何疊加圖像上的數據

Question

我是一名新手Web開發人員，我正在尋找將數據點放在可以與鼠標懸停在一起時進行交互的圖像上，類似於最常見的地圖應用程序。

從我目前的理解來看，在Javascript中使用Canvas似乎是最好的方法，有沒有人有關於如何做到這一點的任何建議，也許指向正確的方向？

Answer 1

良好的資源在這裏：http://dev.opera.com/articles/view/html5-canvas-painting/

但是你在做什麼，你並不真的需要一個畫布，海事組織。如果你有一個圖像，並且你知道你想要疊加的東西（像素偏移量），那麼可以將JSON或XML中每個數據點的像素偏移量提供給客戶端腳本，然後讓它使用絕對定位將它們放在需要放置在圖像上的位置。

Answer 2

雖然可以使用帆布，但不需要畫布。

最短的編碼將使一個背景圖像是你想要放置點的圖像的div。

如果它不是一個圖像，那麼您需要在疊加分割（HTML代碼中的第一個分割）上使用position：absolute將它放在頂部，寬度和高度相同 - 然後隨後的圖像內容分割將根據您絕對定位的分割進行分層。

<div style="background:url(image.jpg); width:100px; height:100px"> 

... material here is on top of the image ... 

</div> 

或

<div style="position:absolute; width:100px; height:100px"> 
    ... material here is on top of the image ... 
</div> 
<div style="width:100px; height:100px"> 
    ... place object here which picks up your map or whatever ... 
</div> 

的...材料這裏是在圖像的頂部...可以是一個畫布，但SVG將更少的編碼，因爲它有鏈接支持

<div style="background:url(image.jpg); width:100px; height:100px"> 
<object data="yourOverlay.svg" width="100" height="100" > 
</object> 
</div> 

這裏是一個樣本SVG文件張貼在http://tutorials.jenkov.com/svg/a-element.html

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <a xlink:href="/svg/index.html"> 
     <text x="10" y="20">/svg/index.html</text> 
    </a> 

    <a xlink:href="/svg/index.html" xlink:show="new"> 
     <text x="10" y="40">/svg/index.html 
     (xlink:show="new")</text> 
    </a> 

    <a xlink:href="/svg/index.html" xlink:show="replace"> 
     <text x="10" y="60">/svg/index.html 
     (xlink:show="replace")</text> 
    </a> 

    <a xlink:href="/svg/index.html" target="_blank"> 
     <text x="10" y="80">m/svg/index.html 
     (target="_blank")</text> 
    </a> 

    <a xlink:href="/svg/index.html" target="_top"> 
     <text x="10" y="100">/svg/index.html 
     (target="_top")</text> 
    </a> 

</svg> 

根據您的應用程序，您可能需要考慮將HTML直接用於「...此處位於圖像頂部...」，因此它可以在較舊的瀏覽器中使用。

而且僅供參考，您可以將背景編碼到SVG中，只需在html頁面中有一個對象標籤，並使用Google SVGWEB「http://code.google.com/p/svgweb/」來支持幾乎所有的瀏覽器。

Answer 3

另一個可能的解決方案是隻使用一個SVG圖像，我相信支持鏈接ect直接