Erstellen Sie eine Karte mit anklickbaren Provinzen / Staaten mit SVG, HTML / CSS, ImageMap

Ich versuche, erstellen Sie eine interaktive Karte, wo Benutzer können klicken Sie auf unterschiedliche Provinzen in der Karte, um Informationen zu bestimmten Provinz.

Beispiel:
http://www.todospelaeducacao.org.br/
http://code.google.com/p/svg2imap/

Bisher habe ich nur Lösungen gefunden, die haben eine eingeschränkte Funktionalität. Ich habe eigentlich nur gesucht diese mit einem SVG-Datei, aber ich wäre offen für andere Datei-Typen, wenn es möglich ist.

Wenn jemand weiß, der einen voll funktionierenden Weg, dies zu tun (jQuery-plug-in, PHP script, Vektor-Bilder) oder eine Anleitung, wie man es manuell tun, bitte teilen.

InformationsquelleAutor der Frage mindtheGaspar | 2012-06-27

  1. 41

    jQuery-plugin für die Dekoration image-maps (highlights, wählen Sie Bereiche, tooltips):

    http://www.outsharked.com/imagemapster/

    Offenlegung: ich schrieb es.

    InformationsquelleAutor der Antwort Jamie Treworgy

  2. 21

    Klingt wie Sie wollen ein einfaches imagemap, würde ich empfehlen, nicht zu machen es komplizierter als es sein muss. Hier ist ein Artikel über wie verbessern Sie imagemaps mit svg. Es ist sehr einfach zu tun anklickbaren Regionen in svg selbst, fügen Sie einfach einige <a> Elemente, um die Formen, die Sie haben wollen anklickbar.

    Ein paar Optionen, wenn Sie etwas brauchen mehr erweiterte:

    InformationsquelleAutor der Antwort Erik Dahlström

  3. 4

    Ich denke, es ist besser zu teilen meine Antwort zu 2 teilen:

    Eine-alles von Grund auf neu (mit SVG, JavaScript, HTML5):

    1. Erstellen Sie ein neues HTML5-Seite
    2. Erstellen Sie eine neue SVG-Datei, jedes anklickbare Fläche (Provinz), sollte eine separate SVG-Polygon in deiner SVG-Datei,
      (Ich bin mit Adobe Illustrator für die Erstellung von SVG-Dateien, aber Sie finden viele alternative software-Produkte zu, zum Beispiel Inkscape)
    3. Hinzufügen mouseover und click-events auf Ihre Polygone nacheinander 
      <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
    onmouseover="mouseOverHandler(evt)"
    onclick="clickHandler(evt)" />
    4. Fügen Sie einen Ereignishandler für jedes Ereignis in Ihrem JavaScript-code und fügen Sie den gewünschten code zum handler 
      function mouseOverHandler(evt) {};
function clickHandler(evt) {};
    5. Fügen Sie die SVG-Datei in Ihre HTML-Seite (die ich bevorzuge, ist inline-SVG, aber Sie können verknüpfte SVG-Datei auch)
    6. Hochladen der Dateien auf Ihren server

    B-Verwenden Sie eine software wie FLDraw Interaktive Image Creator (nur, wenn Sie eine Karte mit Bild und wollen es interaktiv):

    1. Erstellen Sie ein leeres Projekt und wählen Sie Ihre Karte-image als Basis-image beim erstellen des neuen Projekts
    2. Fügen Sie ein Polygon-element (aus dem Form-Menü) für jede Provinz
    3. Für jedes polygon mit einem Doppelklick öffnen Sie die Eigenschaften-Fenster, wo Sie können wählen Sie einen event-Typ für mouse-over und Klick
      auch die Form "Deckkraft" auf 0, um es unsichtbar
    4. Ihr Projekt zu speichern, und Veröffentlichen Sie HTML5, FLDraw wird einen neuen Ordner erstellen, enthält alle notwendigen Dateien für Ihr Projekt, können Sie auf Ihren server hochladen.

    Option (A) ist sehr gut, wenn Sie sind Programmierer oder haben Sie jemanden, den code und die SVG-Datei für Sie,
    Option (B) ist gut, wenn Sie nicht wollen, um jemanden beauftragen, oder verbringen Sie Ihren eigenen Zeit für die Erstellung von alles von Grund auf neu

    Haben Sie einige andere Optionen zu, zum Beispiel unter Verwendung von HTML5-Canvas statt SVG, aber es ist nicht sehr einfach zu erstellen einer Zoombaren Karte mithilfe von HTML5-Canvas,
    vielleicht gibt es einige andere Möglichkeiten zu, die ich nicht kenne.

    InformationsquelleAutor der Antwort bestapps

  4. 1

    Gehen SVG-Skript
    mit Ihren SVG-Standard-Ausgabe ist die Karte in SVG
    Code, fügt Ereignisse hinzu, ist aber leicht identifiziert und verändert werden können, wie erforderlich.

    InformationsquelleAutor der Antwort Chasbeen

  5. 1

    Ich habe mit makeaclickablemap für meine Provinz maps for einiger Zeit nun und es hat eine wirklich gute Passform.

    InformationsquelleAutor der Antwort Tamas

  6. 1

    Ich hatte die gleichen Anforderungen und schließlich diese Map Konverter für mich gearbeitet. Es ist das beste plugin für alle Karten-generation.

    InformationsquelleAutor der Antwort

  7. 0

    Den folgenden code können Sie helfen:

    $("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
    alert($(this).attr("id"));
});

    Quelle

    InformationsquelleAutor der Antwort friebe87

  8. 0

    Hier ist ein weiterer image-map-plugin, das ich schrieb, um zu verbessern, image-maps: https://github.com/gestixi/pictarea

    Macht es einfach, um alle Bereich und lassen Sie Sie verschiedene Stile je nach Zustand der zone: normal, hover, aktiv, deaktivieren.

    Können Sie auch angeben, wie viele Zonen können ausgewählt werden, zur gleichen Zeit.

    InformationsquelleAutor der Antwort Nicolas BADIA

  9. -1

    Haben Sie ganz ein paar Optionen:

    1 - Wenn Sie finden, eine SVG-Datei für die Karte, die Sie möchten,, Sie können so etwas wie RaphaelJS oder SnapSVG hinzufügen klicken Sie auf Zuhörer, die für Ihre Staaten/Regionen, diese Lösung ist am meisten anpassbare...

    2 - Sie können mit dedizierten tools wie clickablemapbuilder (kostenlos) oder makeaclickablemap (ich denke auch).

    [disclaimer] ich bin die Autorin von clickablemapbuilder.com 🙂

    InformationsquelleAutor der Antwort Youssef

Schreibe einen Kommentar