2 Animationen in css mit einem Klick starten - geht sowas?

  • Bin nun mit meinem Latain am Ende,


    tlf1.jpg Habe dieses Bild animiert. Sprich die Geräteräume (GR's) lassen

    sich mit Klick öffnen bzw. schließen. gesteuert wurde das über eine ImageMap. Leider sieht die Grafik

    als GIF sehr bescheiden aus. Also habe ich mich mal etwas mit CSS beschäftigt. Sieht von der Grafik

    zwar um Längen besser aus aber nun ist guter Rat wenn überhaupt möglich teuer. Denn jetzt habe ich

    2 dicke Probleme an der Backe....

    Erstens habe ich in CSS keine Möglichkeit gefunden die nun durch CSS animierten Geräteräume mit klick

    zu öffnen. Die Möglichkeit dem hover noch ein : active zu verpassen zwingt mich die Maustaste gedrückt zu

    halten was ja auch nicht der Brüller ist. ImageMap starten. Sprich die GR's öffenen und schließen ist

    ist mit CSS nicht möglich. Oder bin ich zu blindf? Beim öffenen der vorliegenden GIF habe ich noch eine

    "Legende" mit eingebaut die schön langsam mit dem öffnen der einzelnen Rollos mit ausgerollt ist.

    Die Legende habe ich nun auch in CSS geschrieben. Geht auch bestens. Nur versuche ich seit Tagen

    beides Rollos und Legende zur gleichen Zeit zu starten. Auch hier wieder das Problem mit

    dem hover. Mit der Anweisung ".gr1 hover:active;" läuft die Legende als Animation nur dann wenn ich

    die Maustaste gedrückt halte. Der Geräteraum bleibt solange zu bis ich mit der Maus dort bin. Also auch

    mit Zitronen gehandelt.


    Folglich suche ich nach 2 Antworten die mir weiter helfen könnten.


    1. in CSS das hover durch ein Klick ersetzen.

    2. In CSS zwei Animationen durch ein Klick starten.

    Sorry wurde etwas mehr. Würde mich aber über jeden Tip freuen.


    Die noch mit GIF animierten Bilder kann man sich hier http://www.ffw-schoenfeld.de/ 

    unter dem Menü "Feuerwehr" dann "Fahrzeuge" ansehen.

  • Theorie:

    Das Feuerwehrauto mit geöffnetem Geräteraum im Hintergrund. Darüber eine Grafik (PNG) nur mit den Geräteraumtüren. Und die darüber liegende Grafik dann mit einer der Möglichkeiten von CSS3 von unten nach oben ausblenden lassen.

    So sollte es in der Theorie funktionieren - technisch müsste man das mal in Ruhe probieren und testen.


    Das wäre aber dann DAS Highlight dieser Website...

  • Hallo,

    Na da habe ich mich wohl etwas umständlich ausgedrückt denn genau das und wohl auch

    etwas besser habe ich ja schon für alle Fahrzeuge (TLF, LF, u. MTW) fertig. das Rollo des

    Geräteraumes öffnet sich nicht mehr via animierte GIF (ist ja schon so realisiert) sondern

    über eine CSS Anweisung weil dort um Längen bessere Grafik. Auch die Animation des

    geöffneten Geräteraumes mit Legende, ist schon über CSS fertig gestellt. nur bin ich (noch)

    unfähig beide "Schritte"

    1. Rollo des Geräteraumes öffnen und

    2. enbenden des vergrößerten Geräteraumes über dem Fahrzeug gleichzeitig auszuführen.


    Und das nur Dank dieser blöden Hover Anweisung für die es im CSS keinen Ersatz zu geben

    scheint. Die Anweisung z.B ".gr1:hover:active {" ist ein Griff ins nichts denn ich muss zum

    öffnen des Rollos die Maustaste ja gedrückt halten. Mit ."gr1:hover:focus{" geht auch nicht.

    Also bin ich hier weiteram Basteln und hoffen dass hier im jemand nen Tip hat. Übrigens

    ist das Ganze nicht nur für's Netz bestimmt sondern soll zur Ausbildung genutzt werden.

    Denn man stelle sich vor dass beim Einsatz erst ausgetrudelt würde wo sich im Fahrzeug

    Hydrantenschlüssel, Spaten oder was weis ich befinden. Geht natürlich nicht. Deshalb diese

    Idee.