Ergebnis 1 bis 12 von 12

Thema: [gelöst] Positionieren auf einer Grafik - js, css oder imagemagick?

  1. #1
    Contao-Nutzer
    Registriert seit
    10.03.2010.
    Beiträge
    59

    Frage [gelöst] Positionieren auf einer Grafik - js, css oder imagemagick?

    In meinem Contao-Projekt kann nach Ärzten gesucht werden. Das Suchergebnis soll dann als Punkte in einer Landkarte angezeigt werden. Der Stadtname soll dann auch zu dem Punkt geschrieben werden.
    Die Karte von unserem Bundesland habe ich als Grafik. Die Koordinaten für die Städte habe ich auch.

    Da es egal ist, wo in der Stadt sich die Ärzte befinden, ist eine Google-Map zum Glück nicht nötig - also kein Reinzoomen in eine Stadt.

    Nur welchen einfachsten Weg gibt es für die Umsetzung?

    Die Suche und das Zusammenstellen der Koordinaten erledige ich mit PHP. Aber wie bekomme ich danach das Suchergebnis in der Landkarte?

    A) Das dynamische setzen der Punkte in die Landkarte könnte ich serverseitig per imagemagick erledigen.
    B) Mit Javascript dürfte es auch einfach zu erledigen sein, das setzt aber clientseitig Javascript vor. Und mir wäre es lieb niemanden auszuschließen.
    C) Mit Imagemaps in HTML kann man Bereiche clickable machen, aber keine Punkte setzen.
    D) Bekäme man das mit CSS erledigt, so dass es auf allen modernen Browsern sauber angezeigt wird? Möchte ich hier aber nicht nehmen.
    E) Google-Maps geht natürlich auch und habe ich in einem anderen Contao-Projekt auch umgesetzt.
    F) oder ganz anders?

    Was fällt Euch zu meinem Vorhaben ein?
    Geändert von Janis (16.11.2014 um 17:56 Uhr)

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Einfach mit CSS + HTML

  3. #3
    Contao-Nutzer
    Registriert seit
    10.03.2010.
    Beiträge
    59

    Standard

    Jetzt habe ich ein Beispiel gefunden, das meinen Vorstellungen nahe kommt: interaktive Karte
    Das läuft dort so ab:

    1. Punkten werden per html gesetzt:
    Code:
    <div style="position:absolute; left:569px; top:158px; border-style:none "><img src="marker_1.gif" border="0"></div>
    2. per HTML-Imagemap werden die Punkte klickbar gemacht:
    Code:
    <area shape=circle coords="384,123,4" href="profil.asp?userid=967" target="liste"  
      onmouseover="this.T_TITLE='Klicken Sie auf den Namen'; this.T_STICKY=true; this.T_OFFSETX=-2; 
           return escape('<A HREF=javascript:openhelp(967)><img src=images/coaches/menzel_967_bild_coach_k.jpg align=left border=0 width=30 height=40> 
          Annette Menzel, MOP Master organizational psychology<br >D-32756 Detmold</a><br>')">
    3. Per Javascript-mouseover werden Infos eingeblendet - wie bei (2) zu sehen.
    Kann man das nicht auch noch ohne Javascript hinbekommen?
    Geändert von Janis (16.11.2014 um 15:19 Uhr)

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Die Image Map brauchst du nicht - einfach ein <a> verwenden. Die Mouseover Infos bekommst du wahrscheinlich auch einfach mit :hover hin.

  5. #5
    Contao-Nutzer
    Registriert seit
    10.03.2010.
    Beiträge
    59

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Einfach mit CSS + HTML
    Das wäre ja super, wenn das so einfach geht!!!

    Ich ahnte schon, dass ich es mir wahrscheinlich zu kompliziert machte.
    Kennst Du ein Beispiel, wo das so auf einer Webseite gelöst ist?
    Oder könntest Du den Code "grob anreißen", damit man eine Vorstellung bekommt?
    Geändert von Janis (16.11.2014 um 15:27 Uhr)

  6. #6
    Contao-Nutzer
    Registriert seit
    10.03.2010.
    Beiträge
    59

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Die Image Map brauchst du nicht - einfach ein <a> verwenden. Die Mouseover Infos bekommst du wahrscheinlich auch einfach mit :hover hin.
    Hab es hinbekommen: Einen Punkt bekomme ich so exakt positioniert.

    Code:
    <div style="position:absolute; left:192px; top:140px; ">
       <img src="landkarte.jpg" border="0">
    </div>
    
    <div style="position:absolute; left:300px; top:200px; border-style:none ">
        <a href="info.html">
             <img src="punkt_1.gif" border="0">
        </a>
    </div>
    "hover:"
    Jetzt fehlt mir nur noch eine Infobox, die (ohne Javascript) geöffnet wird, wenn man mit der Maus über dem Punkt steht. Und in der Box sollen anklickbar die Ärzte stehen.
    Vor Jahren habe ich so etwas einmal bei Navigationsleisten/Menüs gesehen. Wenn ich es rausbekomme, wie es geht, schreibe ich es hier für die Nachwelt.
    Vielleicht weiß aber auch einer von Euch, wie man das in mein Beispiel oben integriert.

  7. #7
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

  8. #8
    Contao-Nutzer
    Registriert seit
    10.03.2010.
    Beiträge
    59

    Standard

    Besten Dank für Deine Beispielslösung.

    Und noch mehr Dank für den Hinweis auf jsfiddle ... das kannte ich noch nicht ... da werde ich jetzt neue Ideen auch testen.

    Tschaui

  9. #9
    Contao-Nutzer
    Registriert seit
    10.03.2010.
    Beiträge
    59

    Standard

    So, ich habe jetzt an Hand des Beispiels selbst einmal gefiddelt:

    Wenn ich nur eine Spalte habe ist es ok:
    http://jsfiddle.net/hanmueller/0z2nabLr/

    Setze ich aber eine andere Spalte/div davor, bekomme ich das im css mit relativer/absoluter Positionierung nicht sauber hin:
    http://jsfiddle.net/hanmueller/LLdprsun/2/

    Klar, ich könnte den Wert für die Positionierung des Punktes erhöhen - ich würde den aber gerne relativ zum Bild setzen.
    Aber mit "relative" im css für den Punkt, rutscht der noch tiefer nach unten.

    Verständlich ausgedrückt?
    Geändert von Janis (18.11.2014 um 12:41 Uhr)

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von Janis Beitrag anzeigen
    So, ich habe jetzt an Hand des Beispiels selbst einmal gefiddelt:

    Wenn ich nur eine Spalte habe ist es ok:
    http://jsfiddle.net/hanmueller/0z2nabLr/

    Setze ich aber eine andere Spalte/div davor, bekomme ich das im css mit relativer/absoluter Positionierung nicht hin:
    http://jsfiddle.net/hanmueller/LLdprsun/2/

    Klar, ich könnte den Wert für die Positionierung des Punktes erhöhen - ich würde den aber gerne relativ zum Bild setzen.
    Aber mit "relative" im css für den Punkt, rutscht der noch tiefer nach unten.

    Verständlich ausgedrückt?
    Mach im FireFox einen Rechtsklick auf deine Map und klicke dann "Element untersuchen", dann wird dir vielleicht klar warum das so ist. Dadurch, dass du den Text links floaten lässt, rutscht das <img> innerhalb von #map nach rechts (weil der Text links davon floated). Der #map container erstreckt sich aber weiterhin bis ganz nach links, unabhängig vom floatendem Text. Deine Punkte positionieren sich natürlich relativ zum #map container, da aber das Bild nach rechts gerutscht sind die Punkte nicht mehr dort wo sie sein sollen (bzw. ist eigentlich das Bild nicht mehr dort wo es sein soll).

  11. #11
    Contao-Nutzer
    Registriert seit
    10.03.2010.
    Beiträge
    59

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    Mach im FireFox einen Rechtsklick auf deine Map und klicke dann "Element untersuchen", dann wird dir vielleicht klar warum das so ist. Dadurch, dass du den Text links floaten lässt, rutscht das <img> innerhalb von #map nach rechts (weil der Text links davon floated). Der #map container erstreckt sich aber weiterhin bis ganz nach links, unabhängig vom floatendem Text. Deine Punkte positionieren sich natürlich relativ zum #map container, da aber das Bild nach rechts gerutscht sind die Punkte nicht mehr dort wo sie sein sollen (bzw. ist eigentlich das Bild nicht mehr dort wo es sein soll).
    Hab's verstanden ... einfache Lösung: das zweite div (also #map) auch links floaten lassen :-)

  12. #12
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Zitat Zitat von Janis Beitrag anzeigen
    Hab's verstanden ... einfache Lösung: das zweite div (also #map) auch links floaten lassen :-)
    Naja, mehr oder weniger . Funktioniert so sicher, aber du brauchst dann wahrscheinlich irgendwo noch ein clearing.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •