javascript - How to overlay data on an image - Stack Overflow

I am a rookie web developer and I am looking to put data points over an image that can be interacted wi

I am a rookie web developer and I am looking to put data points over an image that can be interacted with when hovered over, similar to most mon map applications.

From my current understanding, using the Canvas in Javascript seems to be the best way to go, does anyone have any remendations on how to do this and maybe point me in the right direction?

I am a rookie web developer and I am looking to put data points over an image that can be interacted with when hovered over, similar to most mon map applications.

From my current understanding, using the Canvas in Javascript seems to be the best way to go, does anyone have any remendations on how to do this and maybe point me in the right direction?

Share asked Mar 5, 2011 at 18:59 Andrew GuentherAndrew Guenther 1,5022 gold badges13 silver badges30 bronze badges 1
  • Be advised that Canvas won't work on IE8 and below. The approach that Google Maps uses is simply a bunch of images and image maps overlaid on top of each other. – Thomas Commented Mar 5, 2011 at 19:28
Add a ment  | 

3 Answers 3

Reset to default 4

Does not require canvas although canvas can be used.

Shortest coding would be make a div with a background image being the image you want to place points on.

If it is not an image then you would need to make two divides on the overlay divide (the first one in the HTML code) use position:absolute to place it on top with the same width and height -- then the image content divide that follows will be layered under your absolute positioned divide.

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

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

</div>

or

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

The ... material here is on top of the image ... can be a canvas but SVG would be less coding as it has links supported

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

Here is a sample SVG file posted at http://tutorials.jenkov./svg/a-element.html

<svg xmlns="http://www.w3/2000/svg"
    xmlns:xlink="http://www.w3/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>

Depending on your application you may want to consider straight HTML for "... material here is on top of the image ..." so it will work in older browsers.

And FYI you could code the background into the SVG and just have a object tag in the html page and use googles "SVGWEB" http://code.google./p/svgweb/ to support nearly every browser.

Good resource here: http://dev.opera./articles/view/html5-canvas-painting/

But for what you're doing, you don't really need a canvas, imo. If you have an image, and you know where stuff is that you want to overlay (pixel offset), you can provide the pixel offsets from each data point in JSON or XML to your client script, and then just have it use absolute positioning to place them where they need to be on the image.

Another possible solution is to just use an SVG image which i believe supports links ect directly

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744862694a4597795.html

相关推荐

  • javascript - How to overlay data on an image - Stack Overflow

    I am a rookie web developer and I am looking to put data points over an image that can be interacted wi

    1天前
    40

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信