如何叠加图像上的数据

我是一名新手Web开发人员，我正在寻找将数据点放在可以与鼠标悬停在一起时进行交互的图像上，类似于最常见的地图应用程序。如何叠加图像上的数据

从我目前的理解来看，在Javascript中使用Canvas似乎是最好的方法，有没有人有关于如何做到这一点的任何建议，也许指向正确的方向？

来源

2011-03-05 Andrew Guenther

请注意，Canvas将无法在IE8及更低版本上工作。 Google地图使用的方法只是将一堆图像和图像地图重叠在一起。 – Thomas 2011-03-05 19:28:58

良好的资源在这里：http://dev.opera.com/articles/view/html5-canvas-painting/

但是你在做什么，你并不真的需要一个画布，海事组织。如果你有一个图像，并且你知道你想要叠加的东西（像素偏移量），那么可以将JSON或XML中每个数据点的像素偏移量提供给客户端脚本，然后让它使用绝对定位将它们放在需要放置在图像上的位置。

来源

2011-03-05 19:33:22 Paul

虽然可以使用帆布，但不需要画布。

最短的编码将使一个背景图像是你想要放置点的图像的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/”来支持几乎所有的浏览器。

来源

2011-03-05 19:34:26 Wayne

SVG交互由动画标记<= rect x =“20”y =“20”width =“250”height =“250”rx =“5”ry =“5” style =“fill：red” > – Wayne 2011-03-05 20:03:39

另一个可能的解决方案是只使用一个SVG图像，我相信支持链接ect直接

来源

2011-07-08 03:18:19 Hugoagogo

如何叠加图像上的数据

回答

相关问题