1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

JavaScript Problem

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Ultrasonic, 17.01.07.

  1. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    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
     
  2. mewX

    mewX Wohlschmecker aus Vierlanden

    Dabei seit:
    26.12.06
    Beiträge:
    241
    '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ß
     
  3. McBlack

    McBlack Gast

    Ä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.
     
    #3 McBlack, 17.01.07
    Zuletzt von einem Moderator bearbeitet: 17.01.07
  4. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    @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?
     
  5. McBlack

    McBlack Gast

  6. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    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?
     
  7. McBlack

    McBlack Gast

    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.


    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)
     
  8. Ultrasonic

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    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.

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

    McBlack Gast

    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.

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

    Ultrasonic Reinette de Champagne

    Dabei seit:
    09.12.06
    Beiträge:
    417
    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.
     
    #10 Ultrasonic, 18.01.07
    Zuletzt bearbeitet: 10.02.07

Diese Seite empfehlen