Bildwechsel und Precaching ohne Java-Script?
hazardous!
- html
0 twb0 twb
0 schwarze Piste0 Mathias Bigge0 hazardous!
Hallo!
Ich bin gerade dabei eine eigene Homepage zu erstellen.
Dabei bestehen die links für das Hauptmenü aus Bildern.
Beim Rüberfahren mit der Maus soll das Bild gewechselt werden, zu einer kleinen GIF-Animation.
Bisher hab ich das immer mit Java-Script gemacht. Nun lässt sich das aber vom User abschalten, also würde dieser Effekt dann nicht Funktionieren.
Gibt es eine Möglichkeit eine Bildwechselfunktion mit dem Standart-Repertoire von allen Browsern zu bewerkstelligen.
Des Weiteren benötige ich, für diesen Bildwechsel, auch eine Precache-Funktion für die Bilder zu denen gewechselt wird. Mit Java-Script kein Ding, aber geht es auch ohne?
Das wär's soweit.
Schonmal Danke im Voraus für jegliche Hilfe.
Fröhliche Weihnachten!
Gibt es eine Möglichkeit eine Bildwechselfunktion mit dem Standart-Repertoire von allen Browsern zu bewerkstelligen.
Mit einem Wort: Nein.
Des Weiteren benötige ich, für diesen Bildwechsel, auch eine Precache-Funktion für die Bilder zu denen gewechselt wird. Mit Java-Script kein Ding, aber geht es auch ohne?
Nochmal: Nein.
twb
PS: Wenn Du Javascript scheust, weil Deine User es abschalten können, dann wirst Du auf reines HTML zurückgreifen müssen. Vorschlag: Text- statt Bildlinks, CSS ausreizen.
PS: Wenn Du Javascript scheust, weil Deine User es abschalten können, dann wirst Du auf reines HTML zurückgreifen müssen. Vorschlag: Text- statt Bildlinks, CSS ausreizen.
Noch besser: den <noscript>-Tag (http://de.selfhtml.org/html/transit/scripts.htm#noscript) benutzen. So kannst Du Deinen Normaluser mit Bildanimationen beglücken, für die Javascript-Verächter schreibst Du normale Textlinks in den Noscript-Bereich.
Tachchen!
Beim Rüberfahren mit der Maus soll das Bild gewechselt werden, zu einer kleinen GIF-Animation.
CSS kennt die Preudoklasse :hover, mit der man zum Beispiel Hintergundbilder
wechseln lassen kann. Ältere Browser bleiben außen vor.
Des Weiteren benötige ich, für diesen Bildwechsel, auch eine Precache-Funktion für die Bilder zu denen gewechselt wird. Mit Java-Script kein Ding, aber geht es auch ohne?
Etwas primitiv:
<div id="preloader">Bilder Bilder Bilder ...</div>
#preloader {
display: none; }
Gruß
Die schwarze Piste
Hi,
Etwas primitiv:
<div id="preloader">Bilder Bilder Bilder ...</div>
#preloader {
display: none; }
wird wenig bzw. nicht in jedem Browser helfen. Bei display:none wäre die Anforderung der Resource überflüssig. Besser: die Bilder sichtbar in 1*1 px Größe ausgeben.
freundliche Grüße
Ingo
Tachchen!
Bei display:none wäre die Anforderung der Resource überflüssig.
Das sehe ich anders:
Die Trennung von Inhalt und Layout (also der eigentliche Sinn von CSS)
macht es IMHO erforderlich, die Dateien anzufordern, sonst würde ja
nachträgliches Abschalten der CSS-Funktionalität ein Nachladen der Dateien
auslösen. Noch lustiger finde ich die Vorstellung, was beim Speichern der
Seite passiert.
wird wenig bzw. nicht in jedem Browser helfen.
Eigentlich machen es alle richtig, nur Opera hat vergessen,
wie CSS funktioniert, oder?
Besser: die Bilder sichtbar in 1*1 px Größe ausgeben.
Hazardous! hat ja nun beide Lösungen vorgestellt bekommen und kann dann
selbst entscheiden, welche Lösung ihm mehr zusagt oder "besser" erscheint.
Dann müssen wir das nicht machen.
Gruß
Die schwarze Piste
Hi hazardous!,
Des Weiteren benötige ich, für diesen Bildwechsel, auch eine Precache-Funktion für die Bilder zu denen gewechselt wird. Mit Java-Script kein Ding, aber geht es auch ohne?
Du kannst für ältere Browser die Bildchen als 1X1-große Pixelflecken ans Ende der Seite stellen.
Viele Grüße
Mathias Bigge
Danke für die zahlreichen Antworten!
Ich hab es jetzt mal mit CSS probiert und prinzipiell funktioniert es.
Allerdings gibt es ein kleines Problem.
Wenn der Betrachter mit der Maus über den Link fährt, soll eine GIF-Animation _einmal_ abgespielt werden und das letzte Bild gehalten werden. Kein Ding, eigentlich. Ich habe eine GIF-Datei die nur einmal abgespielt wird und zu dieser wird auch gewechselt. Allerdings wird das letzte Bild immernoch angezeigt wenn der Betrachter ein weiteres Mal über den Link fährt, dabei sollte es wieder von vorne abgespielt werden.
Zum leichteren Verständnis: http://hazardous.yticodes.net/testseite.htm
Mit Java-Script hab ich es auch probiert und da lief alles wie erwünscht.
Ich hatte auch probiert das letzte Bild für eine bestimmte Zeit anzuzeigen, sodass die Animation nach 2 Sekunden wieder von vorn abgespielt wurde. Allerdings scheint die Animation im Hintergrund weiterzulaufen, auch wenn sie nicht angezeigt wird. Also entfiel diese Möglichkeit auch.
Theoretisch müsste man den Browser anweisen, die Animation von neuem abzuspielen, sobald man mit der Maus rüberfährt.
Könnt ihr mir hierbei auch helfen?
Wenn das nicht Möglich ist, dann gibt's halt zwei Versionen. Eine mit Java-Script und Animationen in den Bildwechseln und eine ohne Java-Script und Bildwechseln ohne Animationen.
Abermals Danke im Voraus.