nicht angemeldet
Hallo,
Ich weis nicht, wie ich (z.B. mit PHP) die roten/grünen Quadrate an die jeweiligen Positionen im HTML bringen kann?
PHP macht erst einmal nichts anderes als dynamisch HTML zu generieren. Also müssen wir uns erst fragen, wie das HTML auszusehen hat. Dann können wir zu PHP zurückkehren und das gewünschte HTML generieren.
Wie gedenkst du also die Quadrate mit HTML an die Positionen zu bringen? Das wird mit HTML alleine schwierig sein, denn mit HTML kannst du nur irgendwelche Elemente zusammenbauen. Zum Beispiel eine Liste.
<ul>
<li>Leipzig</li>
<li>Berlin</li>
<li>Potsdam</li>
<li>Magdeburg</li>
<li>Zwickau</li>
</ul>
Das Positionieren ist nicht Aufgabe von HTML. Die Präsentation wird immer über CSS gesteuert. Um Elemente frei auf einer Karte zu positionieren, kannst du z.B. absolute Positionierung verwenden. Dazu müssen die Elemente wahrscheinlich einzeln ansprechbar sein. Füge entsprechende Angriffspunkte für das CSS hinzu, beispielsweise Klassen oder IDs:
<ul class="boxen">
<li class="leipzig">Leipzig</li>
<li class="berlin">Berlin</li>
<li class="potsdam">Potsdam</li>
<li class="magdeburg">Magdeburg</li>
<li class="zwickau">Zwickau</li>
</ul>
Eine Beispiel-Formatierung mit absoluter Positionierung:
.boxen li { /* Irgendwelche Formatierungen für alle Boxen */ }
.leipzig { position: absolute; top: 100px; left: 200px; }
Jetzt fehlt nur noch der Aktiviert-Status. Auch den kannst du über Klassen lösen:
<ul class="boxen">
<li class="leipzig">Leipzig</li>
<li class="berlin aktiv">Berlin</li>
<li class="potsdam">Potsdam</li>
<li class="magdeburg aktiv">Magdeburg</li>
<li class="zwickau">Zwickau</li>
</ul>
[code lang=css].boxen li { background-color: red; } /* Standardmäßig rot */
.boxen li.aktiv { background-color: green; }
/* Und so weiter für alle Städte */
Wie das PHP nun aussehen muss? Es muss das gewünschte HTML erzeugen. Also die ul-Liste mit allen Städten generieren und den aktiven eine zusätzliche aktiv-Klasse verpassen.
Das Nachladen mit JavaScript kann auf unterschiedliche Arten erfolgen. Ich würde vorschlagen, einen XMLHttpRequest (»Ajax«) auf ein PHP-Script zu starten, das ausschließlich den obigen Code zurückgibt. Dann wird das aktuelle Dokument mit dem zurückgelieferten HTML aktualisiert.
Grüße
Mathias
Auge