Linienziehen von Objekt zu Objekt, wie geht das im Browser ?

[DerGeier]

Kurz: Ich habe zwei Bilder, die ich mit einer wie auch immer gearteten Linie verbiden möchte/muß. Wenn die Maus über eines der beiden Bilder bewegt wird, soll eine Linie erscheinen, die zu dem anderen Bild zeigt. Ist das möglich?

Meine Fähigkeiten sind da langsam am Ende - sieht einer von euch da eine Möglichkeit?

DerGeier

[maddin]

sofern sich deine beiden Bilder immer an der selben Stelle befinden, könntest du ein weiteres Bild, bestehend aus einer passenden Linie mit transparenten Hintergrund. Dieses Bild liese sich dann mittels absoluter Positionierung (CSS) an die gewünschte Stelle bewegen und mittels JavaScript verbergen bzw. anzeigen (visibility:none / hide || visibility: show | normal; unterscheidet sich von NS zu IE). Eventuell liese sich das Bild auch mittels JS neu positionieren.

Eine zweite Methode wäre es ein Bild zu erstellen, in dem sich die beiden zu verbindenden Bilder befinden. Davon zwei Versionen abspeichern, einmal mit Linie und einmal ohne, und dann mittels JS beim MouseOver- Effekt das Bild wechseln. Die Links liessen sich dann mittels ImageMap realisieren.

Eine weitere Methode wäre eventuell die Verwendung von VML (Vektor Markup Language). Diesen Begriff habe ich bisher aber auch bloß gehört. Damit sollen sich unter anderem Linien zeichnen lassen.

[DerGeier]

Original geschrieben von maddin

sofern sich deine beiden Bilder immer an der selben Stelle befinden, könntest du ein weiteres Bild, bestehend aus einer passenden Linie mit transparenten Hintergrund. Dieses Bild liese sich dann mittels absoluter Positionierung (CSS) an die gewünschte Stelle bewegen und mittels JavaScript verbergen bzw. anzeigen (visibility:none / hide || visibility: show | normal; unterscheidet sich von NS zu IE). Eventuell liese sich das Bild auch mittels JS neu positionieren.

Damit ist es aber starr und kann nur soo angezeigt werden, wie ich es abgespeichert habe. Durch Streckung würde es dann unsauber aussehen.

Eine zweite Methode wäre es ein Bild zu erstellen, in dem sich die beiden zu verbindenden Bilder befinden. Davon zwei Versionen abspeichern, einmal mit Linie und einmal ohne, und dann mittels JS beim MouseOver- Effekt das Bild wechseln. Die Links liessen sich dann mittels ImageMap realisieren.

Die Bilder sollen sich frei im ganzen Dokument positionieren lassen, stells dir wie einen Cheat beim Memoryspielen vor. Ich bewege die Maus über das eine Bild, und die Linie zeigt mir an, wo das andere Bild liegt.

Eine weitere Methode wäre eventuell die Verwendung von VML (Vektor Markup Language). Diesen Begriff habe ich bisher aber auch bloß gehört. Damit sollen sich unter anderem Linien zeichnen lassen.

DAS muß ich mir glatt mal ansehen ... danke für den Tip!

[beetFreeQ]

Hmm, stellst ja ganz schön Ansprüche.

Also eine einfache horizontale bzw. vertikale Linie läßt sich ja mit einem 1-Pixel-Gif realisieren, das du dann immer entsprechend per CSS und JS anzeigen läßt. Diagonale Linien sind allerdings nicht ohne weiteres möglich.

Mal sehen, mir fallen folgende Möglichkeiten ein:

Du gehst nicht diagonal vor sondern legst erst eine vertikale und danach eine horizontale Linie so auf die Seite, daß sie die beiden Bilder über eine Ecke verbindet.

Du hast Zugriff auf PHP und die GD-Lib. Damit könntest Du die Linie immer dynamisch als GIF (aus lizenzrechtlichen Gründen leider nur in alten Versionen der GD-Lib möglich) oder PNG zeichnen lassen.

Du schaust Dir das SVG-Format (Scalable Vector Graphics) genauer an. Damit sollte es auch möglich sein. Da die aktuellen Browser aber noch wenig SVG verstehen und daher noch ein PlugIn nötig ist, weiß ich leider nicht, wie weit man damit schon mit HTML und JS interagieren kann.

[Controller]

Original geschrieben von maddin

......Eine zweite Methode wäre es ein Bild zu erstellen, in dem sich die beiden zu verbindenden Bilder befinden. Davon zwei Versionen abspeichern, einmal mit Linie und einmal ohne, und dann mittels JS beim MouseOver- Effekt das Bild wechseln. Die Links liessen sich dann mittels ImageMap realisieren.

Wobei das Image dann sehr groß wird (KB).

Da es dann ja zwei Dateien sind (IMAGES) wird das wohl Ladezeit in Anspruch nehmen!

[DerGeier]

SVG, PHP und alle anderen hochkomplizierten Lösungen fallen leider weg. (Unter anderem kann ich kein PHP, und von SVG hab ich noch nie gehört - oder ist damit VML gemeint?)

Eine horizontale und eine vertikale Linie .... wenn das geht, dann kann ich auch diese Linie zerschnippeln:

Bild 1

|

|

+------------Bild2

zerschnippelt:

Bild 1

|

+-----+

..........+------Bild2

Und wenn DAS geht, dann kann ich die Schnipsel auch 1 Pixel groß machen, und erhalte, *TATAAA*, eine diagonale Linie ...

Jetzt muß ich mich bloß noch mit Layern anfreunden, denn zwischen den Bildern steht Text.

DerGeier

[beetFreeQ]

SVG ist ein Standard vom W3C. Das ist eine Scriptsprache, mit der man Vectorgrafiken zeichnen kann, die wiederum mit HTML und JavaScript interagieren kann. Ist sozusagen eine freie Alternative zu Flash, wird bisher aber noch kaum unterstützt.

Wenn Du jetzt die Linien als 1-Pixel-Gifs so nebeneinander legen willst, daß sich eine diagonale Linie bildet, solltest Du aber bedenken, daß der Quelltext damit aber reichlich aufgebläht wird. Stellt dir mal vor, die Bilder sind nur 100 Pixel auseinander! Das bedeutet 100 Layer, die wiederum mit JavaScript angezeigt werden müssen... - ein Aufwand, der den Zweck sicher nicht aufwiegt (da mutiert die HTML-Datei schnell zur größten Datei )