Ein "hover" soll mehrere Bilder laden

  • Hallo,


    welche ist die heutige (moderne) richtige Art, per "js" eine Serie von Bildern (bild1/bild2/bild3/...) hintereinder zu laden? Ziel ist es eine "gif-Animation" durch ein "js" zu ersetzen. Einfach gesagt, ich habe ein Bild über welches ich mit der Maus drüberfahre (hover) danach/dadurch soll eine Serie von Bilder mit ca. 50ms geladen werden und beim letzten Bild stehen bleiben. Die Bilder sollen sich nicht bewegen sondern nur Eins nach dem Anderen geladen werden. Zudem ist das Bild auch ein Link (href=). Gehe ich mit der Maus wieder vom Bild weg, dann wird wieder das erste Bild angezeigt und es wird die Animation wieder von vorne gestartet (bild1). Wichtig wäre noch die Möglichkeit das Bild/die Animation per css einzustellen, z.B. durch "class=xy" und .xy {}. Leider geht durch die Arte der Animation (speziell grafische Form) keine andere Lösung.


    Meine jetzige schlechte Lösung ist folgende mit gif-Animation. Leider ist die Qualität der Gif viel zu schlecht, deshalb auch die Bitte um eine Alternative:


    <a href="xy.hmtl">

    <img src="bild1.png" onMouseOver="this.src='anim.gif';" onMouseOut="this.src='bild1.png';" class="xy">

    </a>


    Wäre echt super Hilfe zu bekomme :)


    Danke und Grüße Lukas

  • Eine moderne Art, so etwas zu machen, ist die Verwendung von CSS-Sprites. Hat den Vorteil, dass es ohne Javascript geht. Aber weil Du schreibst, dass Du durch die Art der Animation eingeschränkt bist und weil ich gerade etwas ähnliches hatte, habe ich schnell eine Lösung mit Javascript ausgearbeitet:

    http://webentwicklung.ulrichbangert.de/animation-2.html

    Wenn Du die Lösung mit Sprites vorziehst, musst Du deine Einzelbilder zunächst zu einem Sprite zusammen fügen. Dafür gibt es Tools, aber wenn Du mit Bildbearbeitung fit bist, kannst Du es u. U. auch mit deiner Software machen. So etwas habe ich früher auch mal gemacht:

    https://jsfiddle.net/Sempervivum/a6h2ug6u/7/

  • Wie viele Bilder hast du eigentlich für die erste Version gebraucht?

    Das mit sprites das kenne ich schon .Finde da nur den Nachteil das man alle Bider erst ins eins umwandeln muss mit Fotoshop oder so ,und alle in einer Reihe oder sonst wie auf ein Bild zu bekommen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!