zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden :hover + GIF-Animation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.02.2012, 01:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Ausrufezeichen :hover + GIF-Animation

Über den CSS-:hover-Pseudoselektor wird einem A-Element innerhalb eines Navigations-Aufzählungs-Elements ein animiertes GIF-Bild als CSS-Hintergrund zugewiesen.
Die GIF-Grafik wiederholt sich nicht, das gibt auch Sinn, denn der MouseOver-Effekt soll bei einem MouseOver auch nur einmal ausgeführt werden.

Bei den meisten Browsern wird nach erneutem MouseOver die Animation wiederholt.
Allerdings ist dies z.B. beim Safari Browser und Internet Explorer 9 nicht der Fall, hier wird die Animation nicht wiederholt.

Natürlich könnte man jetzt JavaScript verwenden, aber genau dies möchte ich vermeiden.
Gibt es in CSS einen Workaround sodass auch der Safari und der Internet Explorer 9 die Animation nach wiederholtem MouseOver wiederholen?

Vielen Dank für eure Antworten im Voraus!
Mit freundlichen Grüßen
Innocentus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.02.2012, 08:58
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Wenn sich das GIF beim Hovern selbst nicht wiederholen soll, könntest du versuchen, dem letzten Frame eine sehr lange Darstellungszeit zu gönnen. Vielleicht ist der User ja nicht so lange über dem Element, sodass die Animation noch nicht beendet ist, bevor der User wieder weg ist.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.02.2012, 17:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Pfeil

Vielen Dank für Deine Antwort.

Allerdings könnte dann die Animation bei einem MouseOver auch mittendrin abgespielt werden, was aber dem Effekt nicht sehr zuträglich ist.

Mit freundlichen Grüßen
Innocentus
Mit Zitat antworten
  #4 (permalink)  
Alt 28.02.2012, 17:12
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Dazu müsste sich der Browser den Zustand des GIFs merken. Tut er das denn, d.h. hast du es denn versucht?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 29.02.2012, 11:07
Webworker
neuer user
 
Registriert seit: 28.02.2012
Ort: Berlin
Beiträge: 17
igestalten befindet sich auf einem aufstrebenden Ast
Standard Beispiel?

Hört sich ja ziemlich schräg an - kann man das vielleicht mal irgendwo sehen?
Mit Zitat antworten
  #6 (permalink)  
Alt 29.02.2012, 17:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Pfeil

Vielen Dank für eure Antworten.

Ein Beispiel:
Eine Horizontale Navigations-Leiste mit Einträgen, denen jeweils eine Hintergrund-Grafik zugewiesen wurde, die eine simple geschlossene Box darstellt.
Bei einem :hover eines Navigations-Leisten-Eintrags, wird eine GIF-Grafik geladen, die eine sich öffnende Box zeigt.
Die GIF-Animation wiederholt sich nicht. - Nachdem sich die Box geöffnet hat, bleibt diese offen.

Verlässt der Benutzer den Navigations-Leisten-Eintrag, wird diese wieder sofort geschlossen gezeigt (das ist auch beabsichtigt).
Fährt der Benutzer mit der Maus erneut über denselben Navigations-Leisten-Eintrag oder einen anderen Eintrag der Navigations-Leiste, soll sich die Animation wiederholen.
Allerdings funktioniert das nicht beim aktuellen Safari und Internet Explorer 9 - hier wird das Ende der Animation von dem vorherigen MouseOver-Durchgang angezeigt
- die Animation wird nicht von Beginn an abgespielt. Die Box ist sofort offen - ohne sich erst zu öffnen (das ist nicht beabsichtigt, die Box soll sich erst öffnen).

Mit freundlichen Grüßen
Innocentus

Geändert von Innocentus (29.02.2012 um 17:08 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 29.02.2012, 18:01
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Rein spekulative Idee:
Gib den Verweisen ein explizites background-image: none; (oder ein transparentes Hintergrundbild).

Eventuell bewirkt die Angabe ein Zurücksetzen des animierten Hintergrundbildes, das bei :hover angezeigt wird.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #8 (permalink)  
Alt 03.03.2012, 16:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Pfeil

Vielen Dank für Deine Antwort.

Leider funktioniert das nicht.

Mit freundlichen Grüßen
Innocentus

Geändert von Innocentus (04.03.2012 um 17:02 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
:hover, animiert, gif, hintergrundbild, wiederholt

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 19:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 14:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:07 Uhr.