Tutorial: Zufalls Background-Image

  • PHP

Es gibt 9 Antworten in diesem Thema. Der letzte Beitrag () ist von Dodo.

    Tutorial: Zufalls Background-Image

    Da ich gerade selbst eine Website progge,
    dacht ich ich mir das ich mal ein kleines Tutorial mache.
    Werde euch kurz und knapp zeigen wie ihr eurer Website beibringt ein zufälliges Bild auszuwählen.
    In diesem Tutorial verwende ich 3 Bildchen.

    Zuerst erstellt euch eine Index.html:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Zufalls Hintergrund</title>
    4. <style type="text/css">
    6. </style>
    7. </head>
    8. <body>
    10. </body>
    11. </html>


    Als nächstes fügt ihr im Head Bereich folgendes ein:

    PHP-Quellcode

    1. <?php
    2. include('bg_changer.php');
    3. ?>


    Sollte dann so aussehen:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Zufalls Hintergrund</title>
    4. <style type="text/css">
    5. <?php
    6. include('bg_changer.php');
    7. ?>
    8. </style>
    9. </head>
    10. <body>
    12. </body>
    13. </html>


    Speichert die index.html ab und erstellt eine neue Datei.
    Diesmal benötigen wir eine PHP Datei, bennent sie um in "bg_changer.php". Speichert sie im selben Ordner ab:

    PHP-Quellcode

    1. <?php
    3. ?>


    Zum Inhalt der PHP-Datei.
    Zunächst müssen wir einer Variable einen Zufalls integer zuweisen(1-3 in diesem tutorial):

    PHP-Quellcode

    1. $bg = rand(1,3);


    Danach sagen wir ihm was passieren soll, wenn welche Zahl dran kommt:

    PHP-Quellcode

    1. if($bg == 1){
    2. echo 'body{background-image: url(../images/hintergrund1.jpg);}';
    3. }elseif($bg == 2){
    4. echo 'body{background-image: url(../images/hintergrund2.jpg);}';
    5. }elseif($bg == 3){
    6. echo 'body{background-image: url(../images/hintergrund3.jpg);}';
    7. }


    Insgesamt sieht das ganze so aus:

    PHP-Quellcode

    1. $bg = rand(1,3);
    2. if($bg == 1){
    3. echo 'body{background-image: url(../images/hintergrund1.jpg);}';
    4. }elseif($bg == 2){
    5. echo 'body{background-image: url(../images/hintergrund2.jpg);}';
    6. }elseif($bg == 3){
    7. echo 'body{background-image: url(../images/hintergrund3.jpg);}';
    8. }


    Wenn er z.B. die Zahl 1 auswählt schaut der HTML Quelltext am Ende so aus:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Zufalls Hintergrund</title>
    4. <style type="text/css">
    5. body{background-image: url(../images/hintergrund3.jpg);}
    6. </style>
    7. </head>
    8. <body>
    10. </body>
    11. </html>


    Habe mich kurz und knapp gehalten und hoffe ich konnte euch helfen!
    Mfg. Fabi!

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Zufalls Hintergrund</title>
    4. <style type="text/css">
    5. body{background-image: url(../images/hintergrund<?php echo rand(1,3); ?>.jpg);}
    6. </style>
    7. </head>
    8. <body>
    10. </body>
    11. </html>

    Doctype? Und so ists ja wohl geschickter, dynamischer, kürzer, einfacher und performanter...
    Ich wollte auch mal ne total überflüssige Signatur:
    ---Leer---

    Ganz schlechtes Tutorial, mal davon abgesehen, das PHP und HTML gemischt ist. Aber das ganz macht man anders zwar is jvbsl Lösung schonma kurz, funktioniert aber nur wenn die BGs Zahlen und den selben Stammnamen haben, was man zwar so einrichten könnte, aber oftmals nicht erwünscht ist, da man die BGs dann nicht mehr auseinanderhalten kann.

    Richtige Lösung: Array

    random_background.php

    PHP-Quellcode

    1. <?php
    3. $bgImages = array("winterlandschaft.jpg", "sommer.png", "herbst.gif");
    4. $imageFolder = "images/";
    5. $defaultImage = "standard_bg.jpg";
    7. /* DO NOT CHANGE ANYTHING HERE */
    8. if(substr($imageFolder, -1, 1) != "/") $imageFolder .= "/";
    10. $rnd = rand(0, count($bgImages) - 1); // ob hier -1 notwendig ist weiß ich gerade nicht, ob max mit in Randomize reingenommen wird oder nut Zahlen UNTERHALB von Max ausgegeben werden
    12. $imagePath = $imagefolder.$bgImages[$rnd];
    14. if(empty($bgImages[$rnd]) || !file_exists($imagePath)) {
    15. $imagePath = $imgFolder.$defaultImage;
    16. }
    18. echo "<style type=\"text/css\">body { background-image: url('".$imagePath."');</style>";
    20. ?>


    Btw.: auch wenn man deine Lösung nehmen wollte, If-ElseIf?? Nein, dafür nimmt man wenn überhaupt Switch-Case.

    Es ist zwar immer löblich, wenn man Tutorials machen möchte um anderen zu helfen. Allerdings sollte man dies nur tun, wenn man eine Sprache RICHTIG beherrscht und nicht weil man gerade mal an der Oberfläche gekratzt hat und sich irgendwas zusammen geschustert hat, was zufällig auch noch funktioniert. Sowas hilft leider nur den wenigsten wirklich, weil der Code meistens sehr sehr schlecht ist und Neulinge, die nun noch weniger Ahnung davon haben, dies allerdings nicht merken und somit sich alles total falsch angewöhnen.

    zwar is jvbsl Lösung schonma kurz, funktioniert aber nur wenn die BGs Zahlen und den selben Stammnamen haben

    Ich wollte ja nur dasselbe haben wie er :P

    Ansonsten hätte ich einfach einen Ordner ausgelesen, der die Dateien enthält, geht ja auch ganz schnell und den Rest ebenfalls so wie du ;)
    Ich wollte auch mal ne total überflüssige Signatur:
    ---Leer---

    Habe dieses Tutorial gut gemeint erstellt.
    Wie man es auch macht, es ist falsch für manche oder?
    Wahrscheinlich, weil jeder immer wieder eine schlauere Lösung hat.
    Mit diesem Tutorial kommt man doch auch ans Ziel und zwar das der Hintergrund zufällig bestimmt wird.

    Trotzdem danke für die Antworten.
    Aus Antworten bzw. Meinungen kann man immer lernen :)

    Leider ist nicht immer das Ziel der Weg. Wenn man etwas für sich mach, schön und gut, aber für andere soll der Weg auch richtig sein.

    Schau mal, wenn jeder sich selbst das Autofahren beibringen würde, glaubst du ernsthaft man könnte sich daraus wagen? Nein, jeder würde so fahren wollen wie er will. Genauso is das beim Programmieren auch, manchaml reichen Quick'n Dirty lösungen um etwas hinzubekommen. Allerdings sollte dies KEIN Lernstoff für Leute sein, die sich mit der Materie nicht auskennen. Die wissen nicht ob das gut oder schlecht ist, gewöhnen sich dann einen ziemlich schlechten Stil an durch schlechte Tutorials und wundern sich irgendwann, wieso der Code nicht funktioniert, unendlich unübersichtlich ist usw.

    Wir hatten ein ähnliches Thema schonma zu den Youtube Tutorials. Nicht jeder is dafür gemacht anderen etwas beizubringen, egal wie hoch seine Programmierskills sind. Manchen liegt es einfach nicht Wissen gut rüber zu bringen. Hier ist es der Code, ein Tutorial reicht eben nicht das es "bloß funktioniert" es soll auch ein gewissen Wissen vermitteln, wie wird etwas gemacht, und zwar richtig, nicht irgendwie dahingeschludert, hauptsache es funktioniert.

    Versteh das nicht falsch, ich möchte dich keineswegs hier angreifen oder runter machen, sondern dich zum Denken anregen, ob sowas hingefriemeltes wirklich ein Beitrag für die Community is oder sein soll.
    Ich finde es ansonsten gut, dass sich wleche die Mühe machen um Tutorials zu erstellen, aber dann bitte auch richtig und korrekte.

Facebook