Wie Sie overlay-Daten auf einem Bild

Ich bin ein Anfänger web-Entwickler und ich bin auf der Suche um Daten Punkte in einem Bild, die mit interagiert werden kann, wenn mit der Maus auf, ähnlich zu den meisten gängigen Kartenanwendungen.

Aus meinem heutigen Verständnis, mit dem Canvas in der Javascript-scheint der beste Weg zu gehen, hat jemand irgendwelche Empfehlungen, wie dies zu tun und vielleicht zeigen Sie mir in die richtige Richtung?

  • Beachten Sie, dass die Leinwand nicht funktionieren auf IE8 und unten. Der Ansatz, dass Google Maps verwendet wird, einfach ein paar Bilder und image-maps, überlagert auf der jeweils anderen.
InformationsquelleAutor Andrew Guenther | 2011-03-05
  1. 4

    Nicht erforderlich Leinwand, obwohl canvas verwendet werden können.

    Kürzeste Codierung wäre eine div mit einem hintergrund-Bild das Bild, das Sie möchten, legen Sie die Punkte auf.

    Wenn es nicht ein Bild ist, dann würden Sie brauchen, um zwei teilt sich auf die overlay-teilen (der erste im HTML-code) mit position:absolute, um es zu platzieren auf der Oberseite mit der gleichen Breite und Höhe-dann werden die Bild-Inhalte teilen, die folgt, werden geschichtet, die unter Ihrem absolut positionierten teilen. 

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

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

</div>

    oder

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

    Den ... material ist hier oben auf dem Bild ... lässt sich ein canvas, aber SVG wäre weniger codieren als es links unterstützt

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

    Hier ist ein Beispiel-SVG-Datei gepostet am 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>

    Je nach Anwendung, die Sie betrachten wünschen können, gerade HTML für "... material ist hier oben auf dem Bild ...", also es funktioniert in älteren Browsern.

    Und zur info Sie könnte code, der hintergrund in die SVG und nur ein object-tag in die html-Seite und verwenden googles "SVGWEB" http://code.google.com/p/svgweb/ unterstützt fast jeder browser.

    • SVG-Interaktionen erfolgt durch das animation-tag < <rect x="20" y="20" width="250" height="250" rx="5" ry="5" style="fill:red"> <animate attributeName="opacity" from="1" to="0" begin="klicken Sie auf "+ 1s" dur="1s" fill="wiederherstellen" /> </rect> <circle cx="250" cy="250" r="100" style="fill:blue"> <animate attributeName="fill" from="blau" to="green" begin="mouseover" dur="2s" fill="wiederherstellen" /> </circle>
    InformationsquelleAutor Wayne
  2. 0

    Gute Ressource hier: http://dev.opera.com/articles/view/html5-canvas-painting/

    Aber für das, was Sie tun, Sie nicht wirklich brauchen, eine Leinwand, imo. Wenn Sie ein Bild haben, und Sie wissen, wo Dinge, die Sie überlagern möchten (pixel-Abstand), können Sie das pixel-offsets, die von jedem Datenpunkt in JSON oder XML in Ihre client-Skript, und dann nur absolute Positionierung, um Sie, wo Sie brauchen, um auf dem Bild.

    InformationsquelleAutor Paul
  3. 0

    Andere mögliche Lösung besteht darin, nur eine SVG-Grafik, die ich glaube, links unterstützt ect direkt

    InformationsquelleAutor Hugoagogo
Schreibe einen Kommentar