nicht angemeldet Felix Riesterer
Patrick Andrieu
Patrick Andrieu
Patrick Andrieu
Der Martin
Patrick Andrieu
Der Martin
Patrick Andrieu
Moin Leutz,
bei einer netten Internetseite :http://addran.tcu.edu/index.html
gefällt mir der skalierbare Hintergrund sehr! Ich hatte bereits die Suche bemüht (hoffentlich richtig), aber nichts zu dieser Thematik gefunden. Kann mir jemand sagen, welches Script dahintersteckt? Der Bildwechsel ist dabei uninteressant. Gibt es dafür ein fertiges Script, dass man anpassen kann?
Vielen Dank für Eure Hilfe!
Matti
Liebe(r) Matti,
http://addran.tcu.edu/index.html
gefällt mir der skalierbare Hintergrund sehr!
das ist ein Riesenbild, das zentriert dargestellt wird. Maximiert man das Browserfenster, kommen rechts, links, oben und unten entsprechende Teile des Bildes plötzlich in den Sichtbereich. Passende CSS-Regeln findest Du in der Dokumentation zu "http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=background-position".
Liebe Grüße,
Felix Riesterer.
Hallo Matti!
Da Felix bereits den ersten Teil Deiner Antwort beantwortet hat, übernehme ich den zweiten:
Der Bildwechsel ist dabei uninteressant. Gibt es dafür ein fertiges Script, dass man anpassen kann?
Gibt's sicher. Suchbegriffe schwer zu finden? Überlegen wir mal zusammen: Was passiert genau? Beim Laden der Seite wird ein zufällig ausgewähltes Hintergrundbild angezeigt. Jeder kennt die Bezeichnung von seinen CD-Player für die Zufallswiedergabe: random. Zusammen mit dem englischen Wort für Bild haben wir schon random image als Begriffe. Und mit dem Hintergrund: random background image. Wollen wir's mit JavaScript machen? Bitte sehr: javascript random background image.
Man kann sich sowas aber auch selber schreiben. Was braucht man? Zunächst eine Liste mit möglichen Hintergrundbildern:
var backgrounds = new Array();
Noch ist die somit erstellte Liste leer. Aber nicht lange. Mit:
backgrounds[0] = "/mein/background1.jpg";
backgrounds[1] = "/mein/background2.jpg";
füllen wir sie mit Pfaden zu unseren Backgrounds.
Ach ja, wir brauchen jetzt eine Zufallsfunktion (engl.: random): Math() (random ist in der Liste der Methoden aufgeführt).
Mist, das liefert Fließkommazahlen - und auch noch »nur« zw. 0 und 1. Unsere Liste besteht aber nicht aus Hintergrund-Nr. 0,2345, Hintergrund-Nr. 0,09876 sondern aus Hintegrund-Nr. 1, Hintergrund-Nr. 2 (bzw. Hintergrund 0 und Hintergrund 1, da das erste Element einer Liste immer den Index 0 hat).
Irgendwie müsste man also zunächst runden... was hamma da zur Verfügung? Auf der eben verlinkten Seite sehe ich noch: Math.floor. Zitat: »Erwartet als Parameter eine Zahl. Liefert die nächstniedrigere Ganzzahl dieser Zahl zurück (Abrundung)«. Na, das wäre schon mal was... Behalten wir das im Kurzzeitgedächtnis, dem menschlichen Arbeitsspeicher.
Wie groß ist nun unsere Liste? 2 Elemente, wir wissen das ja, wir haben sie ja selbst erstellt. Aber weiß das auch JavaScript? Hm, schauen wir mal. Unser Liste ist ein Array. Was steht da als Eigenschaft? Bingo! length!
Und jetzt müssen wir aus allen diesen Dingens eine Zufallszahl aus den Elementen-Indizes unserer Liste machen. Math.random liefert eine Zahl zwischen 0 und 1 (genauer: die gleich oder größer als 0 und kleiner als 1 ist), die wir durch Math.floor abrunden. Also haben wir nur 0 als mögliche Zufallszahl. Na, das ist aber kein wirklicher Zufall, oder?
Grübel, grübel... wenn wir die Anzahl der Elemente mal der Zufallszahl von math.random multiplizieren und erst dann abrunden? Müsste doch gehen:
var zufallszahl = Math.floor(Math.random()*backgrounds.length);
alert(zufallszahl); // Bingo! Es kommt mal 0, mal 1 'raus
Somit hätten wir immer ein Element aus unserer Liste! Hm, und wie weisen wir das jetzt dem Hintergrund der Webseite zu?
Die Geschichte kann jetzt ein anderer Kollege übernehmen, ich muss mich anderen Sachen widmen ;) Aber vielleicht schaffst Du's jetzt auch alleine!
Viele Grüße aus Frankfurt/Main,
Patrick
Danke schon mal an Euch beide!
Ich hatte mich wohl etwas missverständlich ausgedrückt.
Der Bildwechsel ist für mich uninteressant! (Wobei ich deine Ideen dazu sicher trotzdem sehr nützlich finde!)
Ich denke aber, dass das Hintergrundbild nicht über das CSS gesteuert wird. Die Bilder sind dort nicht eingebunden!
Ich denke also doch, dass das mit nem Script gelöst wurde...
Hallo Matty!
Ich denke also doch, dass das mit nem Script gelöst wurde...
Quelltext lesen kannst Du, oder?
Ganz unten (ab <div class="bg">) findest Du genau das, was ich Dir im vorigen Beitrag erzählt habe.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo!
Ich denke aber, dass das Hintergrundbild nicht über das CSS gesteuert wird.
Falsch gedacht - Felix hat es Dir doch bereits beschrieben.
Ciao
GG
Falsch gedacht - Felix hat es Dir doch bereits beschrieben.
Und wieso sind dann die Bilder nicht in der CSS-Deitei eingebunden???
Hallo Matti!
Und wieso sind dann die Bilder nicht in der CSS-Deitei eingebunden???
Weil es gar keine Hintergrundbilder gibt und nur so aussieht?
Bevor Du hier ewig rätselratest bis zum St.Nimmerleinstag, speichere den Quelltext ab und probier mal damit herum!
Viele Grüße aus Frankfurt/Main,
Patrick
Noch eine Anmerkung,
das eigentliche Problem ist, dass das Hintergrundbild ab einer Browserfenstergröße die größer ist als das Bild selbst gezoomt wird!!!
Besten Dank!
Hi,
das eigentliche Problem ist, dass das Hintergrundbild ab einer Browserfenstergröße die größer ist als das Bild selbst gezoomt wird!!!
Warum empfindest du das als problematisch?
MfG ChrisB
Warum empfindest du das als problematisch?
Moin, ich fasse noch mal zusammen:
Das Hintergrundbild ist nicht im CSS eingebunden.
Das Zoomen wird aber ausschließlich über das CSS gesteuert.
Das Javascript wird nur für den Bildwechsel benötigt.
Dabei ist es egal, dass das Hintergrundbild ab einer Browserfenstergröße die größer ist als das Bild selbst gezoomt wird!?
Ist das soweit korrekt?
Hallo,
Moin, ich fasse noch mal zusammen:
mach mal ... ;-)
Das Hintergrundbild ist nicht im CSS eingebunden.
Richtig, sondern als img-Element in einer Tabelle mit nur einer einzigen Zelle, die ihrerseits wieder in einem positionierten div steckt, das "hinter" dem restlichen Seiteninhalt liegt. Wüste Konstruktion. Möchte ich nicht nachmachen.
Das Zoomen wird aber ausschließlich über das CSS gesteuert.
Ja.
Das Javascript wird nur für den Bildwechsel benötigt.
Und für das initiale Setzen des Hintergrundbildes. Probier's aus: Kein Javascript, dann auch kein Hintergrundbild. Unschön ist dabei, dass das img-Element einfach mit document.write() in den Quelltext geschrieben wird.
Dabei ist es egal, dass das Hintergrundbild ab einer Browserfenstergröße die größer ist als das Bild selbst gezoomt wird!?
So groß ist mein Bildschirm nicht, als dass ich mein Browserfenster groß genug bekäme, um das zu sehen.
Ist das soweit korrekt?
Mehr oder weniger.
So long,
Martin
Hallo Matti!
Das Hintergrundbild ist nicht im CSS eingebunden.
Es gibt kein Hintergrundbild. Es gibt ein DIV-Element mit der Klasse »bg«, das ein weiteres DIV-Element enthält, das wiederum eine Tabelle enthält.
Das Zoomen wird aber ausschließlich über das CSS gesteuert.
Es wird dem DIV »bg« eine breite von 200% zugewiesen.
Das Javascript wird nur für den Bildwechsel benötigt.
und sorgt dafür, dass der Tabellezelle als Inhalt ein Bild hinzugefügt wird... Schalt mal JavaScript aus!
Dabei ist es egal, dass das Hintergrundbild ab einer Browserfenstergröße
Nochmals: Es gibt KEIN Hintergrundbild!
Mehr Experimentierfreudigkeit wäre vorauszusetzen, wenn Dich diese Lösung interessiert. Wie das viel einfacher geht, hat Dir Felix bereits gesagt.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo,
Es wird dem DIV »bg« eine breite von 200% zugewiesen.
und dem Bild ein min-width und min-height von 50%, wenn ich richtig gesehen habe.
Dadurch kommt der Effekt zustande: Ist das Browserfenster sehr groß (größer als das Bild mit 1200x850), wächst das Bild mit, so dass es 50% von 200% immer ausfüllt; ist das Browserfenster schmaler als 1200px, wird das Bild einfach vom Rand her abgeschnitten.
Ciao,
Martin
An Euch alle:
Vielen Dank!
;o)
Hallo Martin!
Es wird dem DIV »bg« eine breite von 200% zugewiesen.
Dies ist es nicht ganz richtig, aber so: Es wird dem DIV innerhalb des DIV »bg« eine Breite von 200% zugewiesen.
.bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
z-index:5;
}
und dem Bild ein min-width und min-height von 50%, wenn ich richtig gesehen habe [...]
Ja, insgesamt ein seltsames Konstrukt ;)
Viele Grüße aus Frankfurt/Main,
Patrick