bild bei mouse over drehen

  • Hallo,


    gibt es in CSS eine Möglichkeit ein Bild bei Mouse over, wie so einen Propeller zu drehen (nur wenn man mit der Maus drauf geht, sonst muss das Bild stehen.). Wenn das nicht geht könnte ich mir vorstellen, dass das was ich da brauche, mit zwei Bildern geht ... normal ein jpg was den zu drehenden Text normal anzeigt und dann ein annimiertes gif Bild was den Text als Propeller annimiert und was bei Mouse over das normale Bild ersetzt und was dann den Text rotiert. Also, normal: der Propeller steht = xxx.jpg, mouseover: der Propeller dreht=xxx.gif. Das ganze möglichst ohne java script weil ich die Seite möglichst so haben will, dass auch übervorsichtige Nutzer keine Angst bekommen.


    Danke,

    brainstuff

  • Sempervivum


    Danke, das geht ganz toll ... kannst Du mir bitte noch sagen, wie ich rechts daneben einen Kasten setzen kann, in dem es beliebig viele Icones hat, die man anklicken kann (dann öffnet sich eine andere Seite)


    Also es soll dann so aussehen:


    ooooooooooo a b c d

    ooooooooooo e f

    ooooooooooo


    Die "o's" sind das drehende Logo a b c ... sind die Icones (für Seiten in anderen Sprachen


    Ich bringe das einfach nicht hin ... das der Kasten mit den Sprachen will einfach nicht neben dem Logo erscheinen, sondern die Ikones kommen immer in der nächsten Zeile (= unter dem Logo, statt daneben)


    Danke

    brainstuff

  • Sempervivum ich habe es jetzt mit flex versucht, aber das kommt auf dem Smartphone nicht so richtig (die icones kommen in einer Spalte neben dem Logo und diese Spalte ist dann höher wie das Logo).


    Deshalb habe ich die icones mal vorläufig unter das Logo gesetzt ... das sieht eigentlich ganz gut aus und ist auch auf dem Smartphone ok. Aber ... komischerweise .. dreht das Logo nur auf der PC Anzeige. Auf dem Smartphne (zumindestens bei Anzeige in Firefox mit der Smartphone simulations anzeige) bleibt das Logo statisch.


    #outer {

    display: flex;

    }


    #spinner:hover img {

    animation: ani 3s linear forwards infinite;

    }


    @keyframes ani {

    0% { transform: rotate(0); }

    100% { transform: rotate(-360deg); }

    }


    #right {

    margin-left: 5px;

    display: flex;

    flex-wrap: wrap;

    }


    #right>a {

    padding: 5px;

    }



    <div id="outer">

    <div id="spinner">

    <img src="images/pxoxd_logo.jpg">

    </div>

    </div>

    </div>


    <!-- Sprachen --!>


    <div id="right">

    <a href="flex uebereinander.html">

    <img src="http://example.com/_images/fl/de.png">

    </a>

  • Zitat

    ich habe es jetzt mit flex versucht, aber das kommt auf dem Smartphone nicht so richtig (die icones kommen in einer Spalte neben dem Logo und diese Spalte ist dann höher wie das Logo).


    Deshalb habe ich die icones mal vorläufig unter das Logo gesetzt ... das sieht eigentlich ganz gut aus und ist auch auf dem Smartphone ok.

    Das ist ein gängiges Problem, dass die Desktop-Ansicht auf dem Smartphone weniger gut aussieht. Du kannst jedoch mit einer Mediaquery abhängig von der Fensterbreite problemlos zwischen beiden Darstellungen umschalten indem Du flex-direction änderst.


    Was die Drehung betrifft, so findet sie ja nur beim Hover statt und das gibt es auf dem Smartphone nicht.

  • Sempervivum Danke für Deine Antwort. Kann man mit Flex-direction auch die Anzeige für Smartphone Landscape anderst gestalten wie für Portrait? Ich habe eine andere Seite, wo ich gezwungen bin mit 2 Versionen zu arbeiten (per htaccess) und trotzdem kommt die Landscape Seite nicht optimal)

    Bei der alten Version geht die Drehung auch auf dem Smartphone ... wenn man auf das Logo tippt, dreht es sich wie ein Propeller, solange bis man auf einen anderen Platz tippt. Bei der neuen Version habe ich das bisher nur auf einem PC mit den Webtools von Firefox probiert ... damit ging die alte Version aber auch.

    Auf pxoxd.com/tt findest Du die alte Version wo der "Propeller" auch auf dem Smartphone dreht. Ich frage mich aber, ob dieser Effekt nicht mehr stört, wie er hilft. Das Projekt wird von der UNESCO unterstützt und es ist etwas fragwürdig, ob man da mit dem "Propeller" arbeiten sollte. Auf der PC Seite ist das nicht so dominant, wie auf dem Smartphone.


    Danke,

    brainstuff

  • Zitat

    Kann man mit Flex-direction auch die Anzeige für Smartphone Landscape anderst gestalten wie für Portrait?

    Ja, Du brauchst dazu eine geeignete Mediaquery, die Orientierung des Bildschirms kannst Du abfragen und entsprechend flex-direction festlegen:

    https://wiki.selfhtml.org/wiki/CSS/Media_Queries#orientation

    Browsersupport scheint aber nicht so gut zu sein, für Apple-Geräte gar nicht, vielleicht besser mit Javascript abfragen.

  • Zitat

    Bei der alten Version geht die Drehung auch auf dem Smartphone ... wenn man auf das Logo tippt, dreht es sich wie ein Propeller, solange bis man auf einen anderen Platz tippt.

    Tatsächlich, ich bin überrascht! Geht mit der neuen Version genau so gut:

    http://webentwicklung.ulrichbangert.de/spinner.html

    Getestet mit Samsung-Browser und Chrome auf Android.

    Die Browserentwickler haben da eine brauchbare Übersetzung des hover nach touch gefunden.

  • ich hätte auch eine frage zu mouseover bzw hover:


    ich habe auf einer website ein kleines bild 30 x 15 px

    wenn ich mit der maus über dieses kleine bild fahre soll dann ein anderes großes bild (ca. 700 x 450 px) in der nähe des mauszeigers auftauchen.


    ich habe schon viel versucht aber leider kein erfolg.


    wer könnte mir bitte helfen?