JavaScript Problem

Ultrasonic · 17.01.07

Hi,

ich baue gerade an meiner Website und auf Grund der Design Idee soll sich bei jeder Hauptkategorie das Hintergrundbild des <body> ändern. Dazu verwende ich dieses Script:

Code:

<head>
<script language="JavaScript">
<!--

var backImage = new Array();

backImage[0] = "images/01-bg.jpg";
backImage[1] = "images/02-bg.jpg";
backImage[2] = "images/03-bg.jpg";
backImage[3] = "images/04-bg.jpg";

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>
</head>

Code:

<body>
<a href="javascript:changeBGImage(1)">Link</a>
</body>

Das ganze funktioniert soweit in allen Browsern super, jedoch ist das ganze selbst mit vorrausgeladenen Grafiken sehr abgehackt beim Wechsel selber. Ich würde nun gerne entweder eine Zeitverzögerung beim Bildwechsel in das Script einbauen, d.h. das das Bild erst nach 2 sec. angezeigt wird oder aber einen Fader der die Bilder weich überblendet. Bloß weiss ich absolut nicht wo ich da ansetzen soll. Gegooglet hab ich auch schon mehrere Stunden und nichts in Bezug auf Hintergrundbilder mit Fader oder Zeitverzögerung beim Laden gefunden. Nur für Bildergalerien.

Ist unter Euch vielleicht ein JavaScript Experte der mir da einen Lösung oder einen bauchbaren Ansatz liefern kann wie ich das realisieren kann? Dafür wäre ich sehr dankbar, das würde mir echt weiterhelfen.

cu Ultrasonic

mewX · 17.01.07

'Ne Zeitverzögerung könntest du über sowas wie

window.setTimeout("funktiondieaufgerufenwerdensoll", millisekunden);

erreichen...
Verstehst du?

Fader ist schwierig, das weiß ich leider nicht, vielleicht findest du etwas in Frameworks wie Prototype oder Scriptaculous..

gruß

McBlack · 17.01.07

Ultrasonic schrieb:
ich baue gerade an meiner Website und auf Grund der Design Idee soll sich bei jeder Hauptkategorie das Hintergrundbild des <body> ändern.

Ähm..., vielleicht verstehe ich da was falsch, aber wenn Du verschiedene Hintergründe haben möchtest, warum machst Du das nicht einfach per CSS? Lädst die entsprechende CSS-Datei zu den Seiten dazu.

--------------------
Datei: bg-seite01.css

body { background-image: url(images/01-bg.jpg) }
--------------------

--------------------
bg-seite02.css

body { background-image: url(images/02-bg.jpg) }
--------------------

usw.

Und in die entsprechenden Seiten lädst Du die CSS-Datei nach:

Für Seite01:
<link rel="stylesheet" href="bg-seite01.css" type="text/css" media="screen" />

Für Seite02:
<link rel="stylesheet" href="bg-seite02.css" type="text/css" media="screen" />

usw.

Oder Du schreibst die einzelnen Styles gleich in den Kopf der einzelnen Seiten.

Ultrasonic · 17.01.07

@McBlack

Ja das verstehst du gerade etwas falsch. Ist aber nicht Deine Schuld, hab das ganze nicht genug erklärt. Deine Möglichkeit ist sicher machbar, aber nicht bei meinem Vorhaben. Da gibt es nur ein Dokument, was ein Accordion mit 4 Tabs enthält wo der Inhalt des Tabs live vom Server geladen wird und angezeigt wird wenn der jeweilige Tab angeklickt wird. Verschiedene css Dateien oder css Anweisungen wären wohl auch denkbar, jedoch ist das keine Lösung für die Zeitverzögerung.

window.setTimeout("changeBGImage()",2000); hatte ich auch schon unter Verdacht, leider bewirkt das hier genau das Gegenteil. D.h. Das Bild wird nach 2000 Millisekunden ausgeblendet statt eingeblendet.

@mewX

Wie würdest du das schreiben bzw. in das Script einfügen?

McBlack · 17.01.07

Wäre sowas http://michael-schwarz.info/test/ eine Variante?
Jetzt nur mit verschiedenen Farben, keine Bilder.
Auch nur per CSS.

Ultrasonic · 17.01.07

McBlack schrieb:
Wäre sowas http://michael-schwarz.info/test/ eine Variante?
Jetzt nur mit verschiedenen Farben, keine Bilder.
Auch nur per CSS.

So in die Richtung geht das. Nur das sich bei mir das Hintergrundbild des <body> ändert, nicht der einzelnen Tabs sprich <div>. Im übrigen wird der Hintergrund und dessen Position sowie Repeat des <body> via css formatiert. Das Script dient nur der Funktion. Und wie gesagt geht es mir ja um die Zeitverzögerung bzw. einen Fader. Das ganze wirkt für meine Begriffe sehr hart.

Ist das Deine Seite da?

McBlack · 18.01.07

Ultrasonic schrieb:
Nur das sich bei mir das Hintergrundbild des <body> ändert, nicht der einzelnen Tabs sprich <div>.

So auf die Schnelle kann ich Dir da leider nicht helfen.

Ich muß zugeben das JavaScript nicht zu meinen Stärken zählt. JavaScript ist erst jetzt durch Ajax wieder richtig in Mode gekommen, die 10 Jahre davor war es ehe böseböse. :O) Deswegen habe ich es Jahrelang eher nicht beachtet und wenn möglich alles in CSS und PHP programmiert.

Ultrasonic schrieb:
Ist das Deine Seite da?

Ja, nur leider hatte ich bisher zu wenig Zeit um da mal was gescheites drauf zu setzen. Kundenprojekte haben natürlich vorrang. Von irgendwas muß man schließlich leben. :O)

Ultrasonic · 18.01.07

McBlack schrieb:
Ich muß zugeben das JavaScript nicht zu meinen Stärken zählt. JavaScript ist erst jetzt durch Ajax wieder richtig in Mode gekommen, die 10 Jahre davor war es ehe böseböse. :O) Deswegen habe ich es Jahrelang eher nicht beachtet und wenn möglich alles in CSS und PHP programmiert.

Da ist was dran. Aber so schwer kann die eine Zeile nicht sein. Ich bekomme das schon hin. Manchmal steht man sich eben selbst im Weg und einige Zeit später kommt das dann von ganz allein.

McBlack schrieb:
Ja, nur leider hatte ich bisher zu wenig Zeit um da mal was gescheites drauf zu setzen. Kundenprojekte haben natürlich vorrang. Von irgendwas muß man schließlich leben. :O)

Da haben wir wohl mit Rico Ajax den selben Geschmack...

McBlack · 18.01.07

Ultrasonic schrieb:
Da ist was dran. Aber so schwer kann die eine Zeile nicht sein. Ich bekomme das schon hin. Manchmal steht man sich eben selbst im Weg und einige Zeit später kommt das dann von ganz allein.

So ganz einfach scheint das mit dem FadeIn nicht zu sein. Mit dem Exploder gibt es da wohl geeignete Filter, aber dann funktioniert es eben *nur* mit dem Exploder.

Ultrasonic schrieb:
Da haben wir wohl mit Rico Ajax den selben Geschmack...

Mag sein, ich kenne deine Site nicht, bzw. das Projekt an dem Du gerade tüftelst. :O)

Ultrasonic · 18.01.07

Wie auch immer... man sollte sich am besten immer selber Fragen. Des Rätsels Lösung lautet:

Code:

<script language="JavaScript">
<!--

var backImage = new Array();

backImage[0] = "images/00-bg.jpg";
backImage[1] = "images/01-bg.jpg";
backImage[2] = "images/02-bg.jpg";
backImage[3] = "images/03-bg.jpg";

function changeBGImage(whichImage){
if (document.body){
setTimeout(function(){document.body.style.backgroundImage='url('+backImage[whichImage]+')';},2000);
}
}
//-->
</script>

wobei die Ergänzung in der Zeile liegt.

Code:

setTimeout(function(){document.body.style.backgroundImage='url('+backImage[whichImage]+')';},2000);

Funktioniert genauso wie ich es mir vorgestellt habe.

Suche

Suche

JavaScript Problem

Ultrasonic

Reinette de Champagne

mewX

Wohlschmecker aus Vierlanden

McBlack

Gast

Ultrasonic

Reinette de Champagne

McBlack

Gast

Ultrasonic

Reinette de Champagne

McBlack

Gast

Ultrasonic

Reinette de Champagne

McBlack

Gast

Ultrasonic

Reinette de Champagne

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)