Türe im Bild öffnen

[AME]

Hallo Leute,

vielleicht kann mir ja doch noch geholfen werden. Ich habe zwei Bilder von einer Türe. Einmal ist die Türe geschlossen und einmal geöffnet. Jetzt möchte ich daraus ein animiertes Bild erstellen. Und zwar soll wenn jemand mit der Maus über die geschlossene Türe fährt, sich das zweite Bild mit der geöffneten Türe darüber legen. Somit soll der eindruck vermittelt werden dass man im Bild die Türe mit dem Mousecurser öffnen kann.

Würde mich über Antworten freuen.

LG Alex

[dudlhofer]

Da Du nur 2 Zustände zeigen kannst, nämlich offen und zu, wird das mit einer Animation schwierig. Du bräuchtest mindestens noch 2-5 Zwischenstufen um ein Öffnen oder Schließen einigermaßen bewegt hinzubekommen.
Ich nehme an, der Effekt soll in einer Webseite erzielt werden, oder? Dann ist die einfachste Art, das Bild "Tür zu" als "background-image" eines Container-Elements zu deklarieren und beim "onmouseover"-Event die CSS-Klasse entsprechend zu verändern - beim "onmouseout" wieder zurücksetzen.

[AME]

Hallo Dudlhofer,

danke für deine Antwort. Aber nein, das Bild soll nicht in einer Webseite dargestellt werden. Zumindest nicht direkt. Also kann ich mit CSS nichts anfangen. Ich brauche wirklich nur zwei Zustände. Nämlich offen und geschlossen.

Ich brauche sozusagen ein Bild im Bild sobald der Mousecurser sich innerhalb eines bestimmten Bereichs bewegt.

LG Alex

[dudlhofer]

Zitat von AME

Hallo Dudlhofer,
nein, das Bild soll nicht in einer Webseite dargestellt werden. [...]

Ich brauche sozusagen ein Bild im Bild sobald der Mousecurser sich innerhalb eines bestimmten Bereichs bewegt.

Du siehst mich ratlos. Irgendetwas - ein Programm, ein Tool - wird Dein Bild ja anzeigen und muss auf die Mauszeigerposition reagieren. Das Bild selbst kann es jedenfalls nicht sein.

[AME]

Ich mache virtuelle Führungen. Sprich 360x180 Grad Panoramen und lasse diese mit einem Player auf einer Webseite anzeigen. Mit diesen Player kann ich solche Effekte mittels Flash realisieren. Möchte dies aber auch auf Smartphone und Tablet zeigen. In diesen Player gibt es keine Möglichkeit einen solchen Effekt mit HTML5 darzustellen. Somit müsste dies direkt im Bild gemacht werden.

[Jenny]

Hallo!

Zitat von AME

Möchte dies aber auch auf Smartphone und Tablet zeigen.

Dort gibt es doch aber gar keine Maus und auch keinen Mousecursor, mit dem man drüberfahren könnte...

[dudlhofer]

Was meinst Du mit "direkt im Bild"? Es gibt kein Format, das selbsttätig interagiert. Wenn der Player nur Flash kann, dann wird das nix mit Smartphone und Tablet.

[AME]

Ok, also dann ist meine Frage auch beantwortet. Danke.
Dachte es gibt die Möglichkeit ein animiertes GIF zu erstellen das die Animation startet sobald der Cursor über das Bild geht.

LG Alex

[heikehk]

Nö dieses Effekte macht man eher mit html und CSS.
Aber das ist dann auf Tabletts anders zu lösen...