13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)
  • Q:
    Bijdrager
    HSL

    [css] random background??

    hele simpele vraag:
    zou het mogelijk zijn om random een image in de achtergrond van een div te zetten?

    Geblokkeerd
    Anoniem

    Het is zeker mogelijk, maar ik weet niet of het met CSS of met Java(script?) moet.
    Ik ben een tijdje geleden via een van de volgende sites zoiets tegengekomen namelijk;
    http://www.coolwebsites.dk of http://www.newwebpick.com

    Oh… lees nu pas dat het in een DIV moet. Dan weet ik niet zo heel zeker meer
    of het kan:)

    Mvg,
    Joram

    Bijdrager
    Norm 2782

    Niet met CSS…. JavaScript kan…. ik zou zelf met een server side scripting language werken als PHP om daarmee het eea. te randomizen.

    Bijdrager
    basvandorst

    Hier staat nog een topic over random background:
    http://forum.macosx.nl/viewtopic.php?t=42557

    Bijdrager
    HSL

    je kan zo’n randomimage.php maken.. maar zou ik die ook in mijn css kunnen zetten?

    die andere topic ken ik inderdaad.. maar dat is toch een hele andere vraag.:)

    Bijdrager
    Dennisch

    Ik heb het op http://www.madeo.nl via php gedaan. Je roept gewoon stylesheet.css.php?id=$rand aan waarbij je rand gebruikt voor het bepalen van het plaatje wat je in de css laat zien.

    Zorg er wel voor dat je een goede header meegeeft als je de css output in de php file.
    header(‘Content-type: text/css’);

    Bijdrager
    Nietzman
    ”HS-L”

    je kan zo’n randomimage.php maken.. maar zou ik die ook in mijn css kunnen zetten?

    Dat had je toch ook gewoon even kunnen proberen?

    Bijdrager
    rburgt

    Ik heb even een klein scriptje voor je geschreven, het werkt niet perfect, het controleert bijvoorbeel niet of het bestand wat ingeladen moet worden ook echt bestaat maar ik weet zeker dat je dat zelf wel erbij kan maken.

    [code:1:d7b6ac8e3f]<?
    ob_start();

    // directory-naam waar alle plaatjes in staan, laat leeg als deze in dezelfde directory staan
    $picDir = "lj/";

    // voeg zoveel plaatjes toe als je wilt
    $arrPics = array();
    $arrPics[] = "lj-new-1.jpg";
    $arrPics[] = "lj-new-2.jpg";
    $arrPics[] = "lj-new-3.jpg";
    $arrPics[] = "lj-new-4.jpg";
    $arrPics[] = "lj-new-5.jpg";

    // hieronder hoef je niks te veranderren

    // bepaal random plaatje
    $randPic = $arrPics[rand(1, count($arrPics)) – 1];

    // bepaal content type
    $extens = array();
    $extens[’gif’] = ‘image/gif’;
    $extens[’png’] = ‘image/png’;
    $extens[’jpg’] = ‘image/jpeg’;
    $extens[’jpeg’] = ‘image/jpeg’;

    $imgInfo = pathinfo($picDir . $randPic);
    $ContentType = "Content-type: " . $extens[$imgInfo[’extension’]];

    // geef goede header informatie terug
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    header($ContentType);

    // lees bestand in
    readfile($picDir .$randPic);

    // sluit pagina af
    ob_end_flush();
    ?>[/code:1:d7b6ac8e3f]
    edit ow de bedoeling is dat je dit als achtergrond-plaatje gebruikt…

    Bijdrager
    HSL
    ”Nietzman”
    ”HS-L”

    je kan zo’n randomimage.php maken.. maar zou ik die ook in mijn css kunnen zetten?

    Dat had je toch ook gewoon even kunnen proberen?

    ik heb niet zo’n script en voor ik er in ga duiken is het wel handig om te weten of het toevallig werkt:)

    Bijdrager
    basvandorst
    ”HS-L”

    die andere topic ken ik inderdaad.. maar dat is toch een hele andere vraag.:)

    De vraag kan dan wel anders zijn maar de oplossing zal op het zelfde neerkomen.
    In dat ander topic staat toch een jscript dat een random image in een <img src=”https://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=????.&ext=jpg&h=c6a4769683ffbef9e31307aa95a8f059&t=1580334262″> zet, deze kun je toch veranderen naar <div babllala=”?https://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=????.&ext=jpg&h=c6a4769683ffbef9e31307aa95a8f059&t=1580334262″> </div>
    Ook staan er een php script met dezelfde oplossing.

    Bijdrager
    iBert

    Moet ook mogelijk zijn met DOM-scripting en CSS. Dat je bijvoorbeeld een dir aanmaakt met 6 verschillende backgrounds, en dat telkens een andere url wordt ingevuld in de background property van de body in je CSS bestand.. Als ik straks even tijd heb zal ik er eens naar kijken.

    Bijdrager
    rburgt
    ”basvandorst”
    ”HS-L”

    die andere topic ken ik inderdaad.. maar dat is toch een hele andere vraag.:)

    De vraag kan dan wel anders zijn maar de oplossing zal op het zelfde neerkomen.
    In dat ander topic staat toch een jscript dat een random image in een <img src=”https://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=????.&ext=jpg&h=c6a4769683ffbef9e31307aa95a8f059&t=1580334262″> zet, deze kun je toch veranderen naar <div babllala=”?https://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=????.&ext=jpg&h=c6a4769683ffbef9e31307aa95a8f059&t=1580334262″> </div>
    Ook staan er een php script met dezelfde oplossing.

    Javascript gaat heel anders om met anderre objecten, hij heeft waarschijnlijk het style object nodig om een achtergrond te veranderren wat weer op een anderre manier moet worden aangesproken dan src van een plaatje. Daarbij zou ik voor een php scripting oplossing gaan ( zoals mijn scriptje hierboven ), hierbij weet je zeker dat dit goed gaat werken in alle browsers.

    ”iBert”

    Moet ook mogelijk zijn met DOM-scripting en CSS. Dat je bijvoorbeeld een dir aanmaakt met 6 verschillende backgrounds, en dat telkens een andere url wordt ingevuld in de background property van de body in je CSS bestand.. Als ik straks even tijd heb zal ik er eens naar kijken.

    Volgendsmij kan je met DOM niet een online directory browsen ( dat zal ook een erg groot beveiligingslek zijn ). Daar komt nog bij dat DOM niet in alle browsers even goed wilt werken ( helaas ).

    Bijdrager
    Macinspire

    rburgt heeft gelijk. PHP zou de beste oplossing zijn. Zijn script is inderdaad daar een goed voorbeeld voor en het werkt ook in elke browser wat met javascript vaker niet zo is.

13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.