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

[Janis]

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?

[Spooky]

Einfach mit CSS + HTML

[Janis]

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:

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

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

[Spooky]

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

[Janis]

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?

[Janis]

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.

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

[Spooky]

http://jsfiddle.net/nmsvp0mk/

[Janis]

http://jsfiddle.net/nmsvp0mk/

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

[Janis]

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?

[Spooky]

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

[Janis]

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

[Spooky]

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.