Javascript 如何在图像上覆盖数据

我是一名网络开发新手，我希望将数据点放置在图像上，当鼠标悬停在图像上时，可以与图像进行交互，类似于最常见的地图应用程序

从我目前的理解来看，在Javascript中使用画布似乎是最好的方法，有人对如何做到这一点有什么建议吗？也许可以为我指出正确的方向？

这里有很好的资源：

---

但是对于你正在做的事情，你并不真正需要画布，依我看。如果你有一个图像，并且你知道你要覆盖的内容（像素偏移量），你可以用JSON或XML向你的客户端脚本提供每个数据点的像素偏移量，然后让它使用绝对定位将它们放置在图像上需要的位置。

不需要画布，尽管可以使用画布

最短的编码是制作一个div，背景图像就是要在其上放置点的图像

如果它不是一个图像，那么您需要在覆盖分割上做两个分割（HTML代码中的第一个）使用position:absolute将其放置在顶部，具有相同的宽度和高度——然后接下来的图像内容分割将在您的绝对定位分割下分层

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

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

</div>

... 此处的材质位于图像顶部。。。

或

... 此处的材质位于图像顶部。。。
... 在这里放置一个可以拾取地图或其他东西的对象。。。

这个。。。此处的材质位于图像顶部。。。可以是画布，但SVG编码较少，因为它支持链接

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

下面是一个示例SVG文件，发布在

根据您的应用程序，您可能需要考虑直接HTML，“这里的素材位于图像的顶部”，因此它将在较旧的浏览器中工作。

---

仅供参考，您可以将背景编码到SVG中，在html页面中添加一个对象标记，并使用谷歌的“SVGWEB”支持几乎所有浏览器。

另一种可能的解决方案是只使用SVG图像，我认为它直接支持链接ect

请注意，Canvas在IE8及以下版本上不起作用。Google Maps使用的方法只是一组图像和图像地图相互叠加。SVG交互由动画标签处理<

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

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