Problem mit einer interaktiven karte

[Tamelon]

Hallo,

ich habe ein kleines projekt in dem ich auch eine karte realisieret habe. Im Grunde einfach ein fester Hintergrund mit einzelnen klickbaren icons.

im moment löse ich das indem ich eine tabelle erstelle, den hintergrund definiere mittels background="xxx.jpg" und dann in einem feinen raster(40x30 zellen) die icons mittels input type="image" und dann via onclick die entsprechenden funktionen auslöse.

damals als ich angefangen habe fand ich diese lösung "rafiniert" nun weiss ich das es großer mist ist der gewaltig rechenleistung verschwendet. (2 for schleifen im php script) und entsprechend träge ist.

darüber nachgedacht und gelesen hab ich ne menge aber mir fehlt irgendwie der beginn weil ich den einen baustein nicht finden kann.

ich dachte mir es muss doch auch gehen die icons irgendwie direkt positionieren zu können. die daten die zur erstellung der karte benötig werden sind vorhanden mit x-y koordinaten und es is leicht die koordinaten relativ zur einer linken oberen ecke zu berechnen.

entschuldigt bitte wenn es dafür eine einfache lösung gibt, aber wenn es sie gibt hat man sie unter zu vielen fachbegiffen versteckt.

daher meine fragen:

1. wie kann ich icons innerhalb eines bereiches (also eines irgendwo auf der seite eingeblendeten (<div>?) fensters) relativ zur linken oberen ecke dieses fensters platzieren.
also etwas wie z.b. folgender fiktiver befehl: <img src="xxxx.png" class="icon" übergeordnetercontainer="karte" conainerx="45" containery="63"> und zwar theoretisch unendlich viele.

2. wie kann ich 2 dieser icons mit einer linie verbinden (zwecks vereinfachung ) so das ich ein startort bestimme und wenn ich mit der maus über andere icons gehe beide icons durch eine linie verbunden werden bzw eine linie zwischen 2 icons um eine fahrt eines autos zwischen diesen punkten anzuzeigen. (es geht mir nur darum wie man die linie zeichnet, den rest krieg ich hin wie x-y koordinaten berechen, javascript ohne seitenneuladen etc.).

das ganze ist für ein sehr kleines minicar unternehmen das so im moment die kosten einer fahrtstrecke bestimmt (ich habe einfach die karte unseres landkreises eingescannt und die icons sind dutzende von ortsteilen die ich manuell erstellt habe so das man einfach start und ende anklickt und weis kostet 4eur80. die karte ist natürlich mittels ajax verschiebbar etc. es funktioniert auch an sich gut, aber gefällt mir halt einfach nicht :)

[ChrisB]

Hi,

ich dachte mir es muss doch auch gehen die icons irgendwie direkt positionieren zu können. die daten die zur erstellung der karte benötig werden sind vorhanden mit x-y koordinaten und es is leicht die koordinaten relativ zur einer linken oberen ecke zu berechnen.

entschuldigt bitte wenn es dafür eine einfache lösung gibt, aber wenn es sie gibt hat man sie unter zu vielen fachbegiffen versteckt.

Wenn du Elemente positionieren willst, dann ist Positionierung, wie es das Kapitel über die zuständigen CSS-Eigenschaften im Titel trägt, doch wohl kein abwegiger „Fachbegriff“.

2. wie kann ich 2 dieser icons mit einer linie verbinden (zwecks vereinfachung ) so das ich ein startort bestimme und wenn ich mit der maus über andere icons gehe beide icons durch eine linie verbunden werden bzw eine linie zwischen 2 icons um eine fahrt eines autos zwischen diesen punkten anzuzeigen. (es geht mir nur darum wie man die linie zeichnet, den rest krieg ich hin wie x-y koordinaten berechen, javascript ohne seitenneuladen etc.).

„Zeichnen“ geht mit HTML und CSS nicht.
Damit bist du weitestgehend auf gerade Linien beschränkt. (Auch wenn CSS Transforms inzwischen in aktuellen Browser wengistens ein Drehen dieser ermöglichen.)

Wenn wirklich „frei“ gezeichnet werden soll, wäre das Canvas-Element eine Möglichkeit.

das ganze ist für ein sehr kleines minicar unternehmen das so im moment die kosten einer fahrtstrecke bestimmt (ich habe einfach die karte unseres landkreises eingescannt

Dann ist das ganze hoffentlich nicht öffentlich im WWW verfügbar, denn wenn doch, schwebst du in Gefahr, vom Inhaber der Rechte an der von dir vermutlich recht gedankenlos eingescannten Karte abgemahnt zu werden.

MfG ChrisB

[Felix Riesterer]

Lieber Tamelon,

im Grunde habe ich dasselbe Problem wie Du einmal gehabt und dann in etwa so gelöst: Game-Entwurf

Dort sieht man ein Block-Element (mit Hintergrundgrafik), welches auf position:relative gesetzt ist, was dazu führt, dass seine Kindelemente für ihre absolute Positionierung dessen linke obere Ecke als Nullpunkt erhalten.

ChrisB hat dir das notwendige Grundlagenkapitel bereits verlinkt, dort wirst Du lernen, warum das mit position:relative funktioniert.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Tamelon,

das ganze ist für ein sehr kleines minicar unternehmen das so im moment die kosten einer fahrtstrecke bestimmt (ich habe einfach die karte unseres landkreises eingescannt und die icons sind dutzende von ortsteilen die ich manuell erstellt habe so das man einfach start und ende anklickt und weis kostet 4eur80. die karte ist natürlich mittels ajax verschiebbar etc. es funktioniert auch an sich gut, aber gefällt mir halt einfach nicht :)

schon mal die Google Maps API angesehen? Z.B. http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/directions-simple.html

Gruß, Jürgen