Zufälliges Hintergrundbild für komplette Homepage

[matze-hofmann]

Hallo liebe Community,

Ichhabe mal eine Frage an euch:

Ich bin gerade dabei, meine Homepage komplett umkrempeln. Das Grundgerüst steht bisher fast. Jetzt habe ich auf meiner Homepage:

www.matze-hofmann.de.vu

das Feuer als Hintergrundbild.
Jetzt wollte ich fragen, ob es irgendwie möglich ist das Hintergrund mit dem Zufall zu koppeln. Meine Idee:

Ich erstelle das gleiche Hintergrundbild noch einmal mit Wasser. Nun sollte man bei jedem neuen Aufruf der Homepage den Hintergrund verändert sehen (Also mit dem Zufall gekoppelt). Auf gut Deutsch: Ich habe 2 Bilder, beim Aufrufen wird entweder das eine oder das andere Bild als Hintergrund angezeigt.

Ich habe schon verschiedene Codes angeschaut, aber ich checke nirgends ganz durch. Kann mir jemand helfen? Wäre echt nett. Ich bin schon fast am verzweifeln.

mfg
Matze

 

[Tar]

geht mit einer ganz simplen abfrage in php

$bg = rand(1,2);
if ($bg == 1) {
  $background = "bg1.gif";
}

if ($bg == 1) {
  $background = "bg2.gif";
}

<style type="text/css">
body {
background:url(images/<?php echo $background; ?>) top center fixed no-repeat;
}

Hinweis: Nicht getestet, ich garantiere nicht für Richtigkeit, ist nur eine mögliche Lösung / Laien-Lösung / ein Denkanstoß.

 

[Icy]

ich würde es aber ohne if-Anweisung für jede einzelne Möglichkeit machen. So kannst du bei Bedarf später einfach noch mehr Hintergründe einfügen, wenn du willst:

<?php
$anzahl = 10;
$num = rand($anzahl);

$bg = "Hintergrund".$num.".gif";
?>

$bg kannst du natürlich beliebig verändern. Wichtig ist nur, dass die Dateinamen durchnummeriert sind (hier Hintergrund1.gif, Hintergrund2.gif, Hintergrund3.gif, etc.) und alle von der selben Dateiart sind.

MfG Icy

 

[BcF]

Wenn du noch weniger Arbeit haben möchtest:

<?php
  $dir = "background"; //Ordner mit allen Hintergrundbildern
  $handle = opendir($dir);
  while($file = readdir($handle))
  {
    if(@getimagesize("$dir/$file"))
      $bg[] = "$dir/$file";
  }
  $background = $bg[array_rand($bg)];
?>

Dann sucht sich das Script selbstständig ein Bild aus dem angegebenen Verzeichnis und du musst nix mehr dran verändern. Ich weiß nur nicht wie das mit der "Performance" ist (immerhin wird bei jedem Seitenaufruf das Verzeichnis durchsucht), aber wenns nur das eine ist, dann sollte es gehen.

 

[matze-hofmann]

Geht das auch ohne PHP? (bin bei rePage)

Sorry mit PHP bin ich noch nicht so erfahren.

Kann man PHP einfach so in HTML einbauen?

 

[Tar]

Prinzipiell geht das schon, solange dein Server das ganze auch unterstützt. Ich könnte mir eventuell auch eine Lösung mit Javascript vorstellen, aber davon hab ich keine Ahnung und es ist ineffektiv wenn jemand Javascript nicht aktiviert hat.

 

[BcF]

Mit JavaScript könnt' man's so machen:

<script type="text/javascript">
  //<![CDATA[
    //Einstellungen
    var stamm = "hintergrund"
    var endung = "png"
    var anzahl = 10
    /*
     * Bildname setzt sich zusammen aus [stamm]+[zahl]+[endung], z.B.
     * hintergrund3.png
     */

    //Zufallszahl zwischen 1 und der Bildanzahl
    var zahl = Math.floor( 1 + anzahl * Math.random() )

    //Bildnamen aus Zufallszahl bilden
    var img = "hintergrund" + zahl + endung

    //Hintergrund setzen
    document.getElementsByTagName('body')[0].style.backgroundImage = img
  //]]>
</script>

Ich hoffe, ich hab's verständlich kommentiert. Fehler sind nicht ausgeschlossen.

Noch was: Setz auf jeden Fall mit CSS einen Standardhintergrund, sonst gibt's ohne JS gar keinen zu sehen.

Wie du vielleicht feststellst ist die PHP-Lösung um einiges flexibler und einfacher handzuhaben, aber wenn's der Server nicht mitmacht ist da ja nix zu machen ;)
(Ja, man könnte es einfach so, wie hier beschrieben in den Quelltext setzen.)

 

[matze-hofmann]

Heyhey

vielen dank BfC

Sorry ich bekomme das ganze aber einfahc nicht angepasst. Mit Scripten bin ich einfach nicht richtig fit. Also ich habe alles angepasst. Und eigenlich müsste alles funktionieren. Tut es aber irgendwie nicht.

Ich habe jetzt alle 3 Dateien mal hochgeladen

http://www.repage2.de/memberdata/matze-hofmann3/Hintergrund1.gif
http://www.repage2.de/memberdata/matze-hofmann3/Hintergrund2.gif
http://www.repage2.de/memberdata/matze-hofmann3/Hintergrund3.gif

Könnte mir jemand den Text anpassen? Soweit bin ich bisher?

 <script type="text/javascript">
  //<![CDATA[
    //Einstellungen
    var stamm = "http://www.repage2.de/memberdata/matze-hofmann3/Hintergrund"
    var endung = ".gif"
    var anzahl = 3
    /*
     * Bildname setzt sich zusammen aus [stamm]+[zahl]+[endung], z.B.
     * hintergrund3.png
     */
    //Zufallszahl zwischen 1 und der Bildanzahl
    var zahl = Math.floor( 1 + anzahl * Math.random() )
    //Bildnamen aus Zufallszahl bilden
    var img = "hintergrund" + zahl + endung
    //Hintergrund setzen
    document.getElementsByTagName('body')[0].style.backgroundImage = img
  //]]>
</script>

Was mich ein bisschen Stutzig macht:

var img = "hintergrund" + zahl + endung

dass das Wort hintergrund schon angegeben ist. Habe es auch durch stamm ersetzt, funktioniert trotsdem irgendwie nicht.

Ich wäre superdankbar, wenn mir es jemand anpassen könnte mit diesen 3 Hintergrundbildern


Daaaaaaaaaaaaanke schon mal für all eure Hilfe

mfg
Matze

 

[BcF]

Ich sag ja: Fehler nicht ausgeschlossen ;)

So geht's jetzt, hab's getestet:

<script type="text/javascript">
  //<![CDATA[
      function bg()
      {
        //Einstellungen
        var stamm = "http://www.repage2.de/memberdata/matze-hofmann3/Hintergrund"
        var endung = "gif"
        var anzahl = 3
        /*
         * Bildname setzt sich zusammen aus [stamm]+[zahl]+[endung], z.B.
         * hintergrund3.png
         */

        //Zufallszahl zwischen 1 und der Bildanzahl
        var zahl = Math.floor( 1 + anzahl * Math.random() )

        //Bildnamen aus Zufallszahl bilden
        var img = stamm + zahl + "." + endung

        //Hintergrund setzen
        document.getElementsByTagName('body')[0].style.backgroundImage = "url(" + img + ")"
    }
  //]]>
</script>

Und <body> ersetzt du durch:

<body onload="bg()">

Kurze Aufzählung meiner Fehler:
- Vergessen "hintergrund" durch stamm zu ersetzen ;)
- Den Punkt zwischen Dateiname und Endung vergessen
- Der Wert für background-image muss selbstverständlich in url() gepackt werden
- Das Script wurde ausgeführt, bevor <body> im Quelltext stand, daher war der Tag noch nicht bekannt. Daher jetzt auch das onload, welches bewirkt, dass die funktion hg() aufgerufen wird, wenn der Body geladen ist.

Lange Liste, aber jetzt geht's ;)

 

[matze-hofmann]

Heyhey,

vielen Dank für deine Schnelle und einwandfreie Hilfe!

Solche Leute wie dich braucht man

Danke!

mfg
Matze