Mehrere Grafiken auf grosser Grafik dynamisch platzieren

[thomas]

Hallo

Auf eine Grafik (Weltkarte) möchte ich verschiedene Pins platzieren. Jeder pin hat eine anderen x/y Wert relativ zu 0/0-Punkt der Weltkarte. Es gibt max. 25 Pins zu platzieren. Wie würdet ihr die Platzierung dieser Pins am einfachsten machen? Mit CSS für jeden eine Klasse oder gibt es mit JS eine Möglichkeit? Die x/y Werte der Pins kommen aus einer DB und werden mit PHP ausgelesen.

Danke für eure Tipps.

Gruss
Thomas

[suit]

Mit CSS für jeden eine Klasse

Warum nicht jedem eine ID geben? Eine Klasse ist unsinnig in diesem Kontext.

Die x/y Werte der Pins kommen aus einer DB und werden mit PHP ausgelesen.

Dann kannst du den CSS-Schnipsel ja problemlos generieren - in diesem fall ist ggf. sogar inline vertretbar.

<ul class="karte">  
  <li id="pin1">foo</li>  
  <li id="pin2">bar</li>  
  <li id="pin3">baz</li>  
</ul>

<ul class="karte">  
  <li style="left: 20px; top 30px;">foo</li>  
  <li style="left: 60px; top 50px;">bar</li>  
  <li style="left: 80px; top 10px;">baz</li>  
</ul>

Die restlichen Stilinformationen setzt du im ausgelagerten CSS mittels dem Selektor #karte li.

[Thomas]

Hallo

Merci für die Hilfe. Es klappt auch schon gar nicht schlecht: Map

Doch leider ist der 0 Punkte nicht genau über der grossen Karte. Stehe irgendwie auf dem Schlauch, hast du eine Ahnung?

Vielen Dank und Gruss.
Thomas

[suit]

Merci für die Hilfe. Es klappt auch schon gar nicht schlecht: Map

Ich hätte die Karte als Hintergrundbild in ul#karte eingefügt.

Alternativ hätte ich als Codevorschlag noch folgendes - wenn du bei einem img-Element bleiben willst

<div id="karte">  
  <img src="foo.png" alt="Weltkarte" />  
  <ul>  
    <!-- wie gehabt -->  
  </ul>  
</div>

Bei deiner Lösung fehlt irgendwie die Zusammengehörigkeit von Karte und Pins - das macht die Lösung nicht sehr modular und portabel.

Doch leider ist der 0 Punkte nicht genau über der grossen Karte. Stehe irgendwie auf dem Schlauch, hast du eine Ahnung?

An an den paddings oder margins z.B. kontrollier mal, ob du die alle sauber entfernt hast. Werkzeuge wie z.B. Dragonfly oder Firebug helfen hierbei.

[Der Martin]

Hi,

Doch leider ist der 0 Punkte nicht genau über der grossen Karte. Stehe irgendwie auf dem Schlauch, hast du eine Ahnung?

liegt es vielleicht daran, dass du die Logik der Positionierung nicht ganz verstanden hast?
Du setzt das Container-div auf position:absolute, gibst ihm aber keine Koordinaten; dagegen definierst du die einzelnen Pins als position:relative, was ja nur eine Verschiebung gegenüber ihrer "Normalposition" bedeutet.
Umgekehrt bekommt's einen Sinn: Das Container-Element relativ, aber ohne Versatz, und die darin ausgerichteten Kindelemente absolut.

Abgesehen davon finde ich deine Struktur auch verwirrend. Das von suit vorgeschlagene Markup sieht irgendwie schlüssiger aus:

<div id="karte">

<img src="foo.png" alt="Weltkarte" />
  <ul>
    <!-- wie gehabt -->
  </ul>
</div>

  
Von diesem Snippet ausgehend nun div#karte relativ positionieren, und zwar mit Offset 0 (einfach kein top und left angeben), und die li-Elemente absolut, so dass sich ihre Positionen auf das Container-Element beziehen.  
  
So long,  
 Martin  

-- 
Wenn der Computer wirklich alles kann,  
dann kann er mich mal kreuzweise.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(