Véletlenszerű háttérkép (random background) CSS-ből?

Moon · 2008. Jan. 2. (Sze), 07.58

Sokszor rákeresve több PHP megoldást találtam arra, hogy véletlenszerűen változzon a háttérkép minden betöltésnél. Nálam valamiért egyik sem működött, nyilván ennek legfőbb oka az, hogy nagyon kezdő vagyok. De az is lehet, hogy ezek a megoldások nem arra valók, amire nekem kell, ugyanis egy demo DVD-t kell írnom, amin fejezetenként külön mappákban vannak a háttérképek és mindezt egy, a DVD-re másolt Easy Prezentation nevű hordozható böngésző jeleníti majd meg, ami ha jól értem az IE-t használja. (Ezért értelemszerűen kizárt minden olyan megoldás, ami fájlok átnevezésével, vagy tartalmuk megváltoztatásával próbálkozik.) Ilyent még sohasem kellett csinálnom...

Olyan megoldásra van szükségem, amire a CSS fájlból hivatkozhatok és egy adott könyvtárban lévő összes képfájl közül választ véletlenszerűen. Azok a módszerek, ahol a HTML fájlba kell szkriptet beilleszteni, sajnos nem jók, mert nagyon sok a fájl és a képek neve is fejezetenként más-más. Mindenképp a CSS-ből kell megoldanom, mert a stíluslapoknak minden fejezetnél azonos a fájlneve és a tartalma, így gond nélkül bemásolhatók bárhová. A képek mérete egyforma és a mappáik relatív útvonala is mindenhonnan azonos, ha csak ez kell a random-generáló PHP fájlnak.

Minden oldal eleje így néz ki

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML lang="hu-HU">
<HEAD>
<TITLE>Demo DVD Project</TITLE>
<META content="hu-HU" name=content-language>
<META http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<LINK href="stilus.css" rel=stylesheet type="text/css">
<LINK rel="shortcut icon" href="icon.ico">
<STYLE type=text/css>@import url( "stilus.css" );
</STYLE>
</HEAD>
<BODY class=demodvd>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML lang="hu-HU">
<HEAD>
<TITLE>Demo DVD Project</TITLE>
<META content="hu-HU" name=content-language>
<META http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<LINK href="stilus.css" rel=stylesheet type="text/css">
<LINK rel="shortcut icon" href="icon.ico">
<STYLE type=text/css>@import url( "stilus.css" );
</STYLE>
</HEAD>
<BODY class=demodvd>

A stilus.css-ben most még ez van:

BODY.demodvd {BACKGROUND: rgb(250,250,150) url('bg001.jpg') scroll top left no-repeat}

BODY.demodvd {BACKGROUND: rgb(250,250,150) url('bg001.jpg') scroll top left no-repeat}

Olyanokkal próbálkoztam, ahol egy PHP fájlt kellett bemásolni a képek könyvtárába és a kép helyett erre a fájlra kellett hivatkozni. De se a HTML-be próbaként beillesztett sima <IMG src="rnd-bg.php"> se a CSS-ből url('rnd-bg.php') nem működött, se Easy Prezentation-ben, se Firefox-ban. Lehet, hogy valami sokkal alapvetőbb hibát vétettem? Van erre megoldás PHP-ben, Javascript-ben, vagy bármiben? Aki csinált már ilyent, annak a segítségét kérem.

■

HTML, CSS, JavaScript, Ajax

csirip

Ne csináld...

janoszen · 2008. Jan. 2. (Sze), 08.33

Ne csináld, ne szivasd a felhasználót. Minden alkalommal, amikor letöltődik a lap, a felhasználónak meg kell várnia az 50-60 k-s random képed lecsöpögését és legkésőbb a harmadik újratöltésnél kezd kib* idegesítő lenni.

Egyébként meg az a megoldása a dolognak, hogy fönttartasz x db stylesheetet x db háttérkép hivatkozással és az azokra való hivatkozást (link) véletlenszerűen pakolgatod be PHP-ból a head-be.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

css expressions

razielanarki · 2008. Jan. 2. (Sze), 08.48

ha valóban az IE motorja fut a programban, akkor használd az 'expression' tulajdonságot a háttérkép beállítására. (IE 5.0+)
(ugye én értem jól, hogy ez nem a webre készül hanem valamiféle dvd-s prezentáció lesz?)

lényegében meg tudsz adni egy kis js kódrészletet cssből.

pl: (feltételezve hogy a back0.jpg .. back9.jpg képek közül akarsz választani - nem ellenőrizem csak hasból írom)

background-image: expression ("url('back"+(Math.floor(Math.random()*10))+".jpg')");

background-image: expression ("url('back"+(Math.floor(Math.random()*10))+".jpg')");

és végül egy itt egy leírás

A hozzászóláshoz regisztráció és belépés szükséges
új téma

egy megoldás

griphons · 2008. Jan. 2. (Sze), 09.05

Bár egyetértek proclubbal, ez egy idő után tényleg idegesítővé válhat, de mivel ez egy amolyan prezentáció-féleségnek készül, és nem webre, ezért szerintem nem lesz gond.

A body stílusát ne stíluslapból vedd, hanem a head részben határozd meg, így beszúrhatsz php scriptet, ami módosítja a háttérképet. Önálló stíluslapban ugye ez nem működik, nem működhet.

Példa:

# <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML lang="hu-HU">
<HEAD>
<TITLE>Demo DVD Project</TITLE>
<META content="hu-HU" name=content-language>
<META http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<STYLE>
body.demodvd {background: url(<?php include "rnd-bg.php"; ?>);}
</STYLE>
<LINK href="stilus.css" rel=stylesheet type="text/css">
<LINK rel="shortcut icon" href="icon.ico">
<STYLE type=text/css>@import url( "stilus.css" );
</STYLE>
</HEAD>
<BODY class=demodvd>

# <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<HTML lang="hu-HU">  
<HEAD>  
<TITLE>Demo DVD Project</TITLE>  
<META content="hu-HU" name=content-language>  
<META http-equiv="Content-type" content="text/html; charset=iso-8859-2">  
<STYLE>
  body.demodvd {background: url(<?php include "rnd-bg.php"; ?>);}
</STYLE>
<LINK href="stilus.css" rel=stylesheet type="text/css">  
<LINK rel="shortcut icon" href="icon.ico">  
<STYLE type=text/css>@import url( "stilus.css" );  
</STYLE>  
</HEAD>  
<BODY class=demodvd>

Persze a stilus.css-t linkelheted uyanúgy, hogy a többi formázási beállítást abból vegye az oldal (a body ne szerepeljen, mert akkor a head-ben hiába bűvölöd).
Az rnd-bg.php pedig tartalmazhatja a random generálást, visszaadva a kiválasztott kép abszolút url-jét pl: "backgrounds/bg_001.jpg".

rnd-bg.php példa:

<?php
$hattermappa = "backgrounds";
$hatterek = array();
$ndx = 0;
$handle = opendir($hattermappa);
while (false !== ($file = readdir($handle))) {
$hatterkep=$hattermappa."/".$file;
if (is_file($celpont)) {
$katterek[$ndx]=$hatterkep;
$ndx++;
}
}
closedir($handle);
shuffle($hatterek);
echo $hatterek[0];
?>

<?php
$hattermappa = "backgrounds";
$hatterek = array();
$ndx = 0;
$handle = opendir($hattermappa);
while (false !== ($file = readdir($handle))) {
    $hatterkep=$hattermappa."/".$file;
    if (is_file($celpont)) {
        $katterek[$ndx]=$hatterkep;
		$ndx++;
    }
}
closedir($handle);
shuffle($hatterek);
echo $hatterek[0];
?>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Hmm...szerver is fut a gépen?

Ronyn · 2008. Jan. 2. (Sze), 18.09

Mert ha nem,vagy nem a cd lejátszo van beállitva webrootnak,akkor a phpfuttatás nem igazán fog menni??
Akkor marad a js,amit ugye a bongészö futtat...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ja tényleg

griphons · 2008. Jan. 3. (Cs), 08.47

Ez mondjuk igaz, tehát php csak akkor fog lefuni, ha a szerver értelmezi azt.
Én azért írtam php-s megoldást, mert az alapkoncepcióban szerepelt ez a lehetőség. Bár én láttam már olyan wysiwig szekesztőt, ami webszerver nélkül is futtatta a php-s weboldalt (hideg rázott tőle), végülis ez benne lehet egy prezentációs progiban is...
(Amúgy a kódban a $celpont az $hatterkep, csak elirtam bocsi)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

talán a javascript...? ...de hogyan?

Moon · 2008. Jan. 4. (P), 02.06

Köszönöm a hozzászólásokat. Közben tovább kísérleteztem a demo DVD-vel és még több módszerről derítettem ki, hogy nem nyerő. :(
proclub: Ez sajnos nem az első olyan feladat, amire én is azt mondom elsőre, hogy "Ne csináld", és nyilván nem is az utolsó, amikor ezt nem engedhetem meg magamnak. :)
razielanarki: Ez egy nagyon szimpatikus megoldás! Sajnos sehogy sem bírtam működésre, pedig ez lett volna a legegyszerűbb.
griphons: Attól tartok, hogy Ronyn sejtése bejött, mert sajnos semmilyen PHP módszer nem működött. Akármilyen béna vagyok, a pontosan megadott kódodat akkor sem tudtam volna elszúrni, mégsem működött, ez nyilván az Easy Prezentation hibája. ($katterek rögtön észrevettem, javítottam.) Bocs, ha félreérthető voltam, a PHP nem volt kikötés, csak először olyan megoldásokat találtam, pl. Random Image Rotation.

Találtam egy javascript-et, amivel ugyan cserélődik a háttér, viszont a többi rá vonatkozó beállítás (scroll top left no-repeat) elveszik, és az oldal szétesik. :( Ha ezeket nem adhatom meg CSS-ben, akkor hogyan tehetem a HTML fájlba? A nem háttérképre vonatkozó BODY beállítások azért jöhetnek a CSS-ből?

Ha nincs olyan javascript, amelyiknek a háttérképek felsorolása helyett a könyvtár relatív útvonalát lehet megadni, akkor még megoldom valahogy, hogy a képek mappáiban mindenhol ugyanannyi és azonos nevű fájl legyen, így mehetnek a szkriptbe a fájlnevek. Segítséget ahhoz kérek, hogy a szkriptet tehetem-e külön fájlba, úgy, mint a CSS-t, és hogy pontosan milyen kódokkal válthatom ki a CSS BODY beállításait HTML-ben?

Köszönöm.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

javascriptes random bg

griphons · 2008. Jan. 4. (P), 11.02

Amit találtál kód, az nagyszerűen alkalmazható, csak ne magát a bodyt állítasd elő vele, hanem a css kódot.
Persze a háttérképek relatív url-jeit meg kell adni a scriptnek, ő nem fogja tudni kibányászni egy adott mappából (én legalábbis nemtom, hogy azt js-tel meg lehet-e oldani)
Ilyen legyen a kódod:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML lang="hu-HU">
<HEAD>
<TITLE>Demo DVD Project</TITLE>
<META content="hu-HU" name=content-language>
<META http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<LINK href="stilus.css" rel=stylesheet type="text/css">
<LINK rel="shortcut icon" href="icon.ico">
<script>
var randombgs=["../clip/backgr4.jpg", "../clip/backgr17.jpg", "../clip/backgr13.jpg"];
document.write('<STYLE>body.demodvd {');
document.write('background: rgb(250,250,150) ');
document.write('url('+randombgs[Math.floor(Math.random()*randombgs.length)]+'") ');
document.write('scroll top left no-repeat;');
document.write('}</STYLE>');
</script>
</HEAD>
<BODY class=demodvd>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">    
<HTML lang="hu-HU">    
<HEAD>    
<TITLE>Demo DVD Project</TITLE>    
<META content="hu-HU" name=content-language>    
<META http-equiv="Content-type" content="text/html; charset=iso-8859-2">    
<LINK href="stilus.css" rel=stylesheet type="text/css">    
<LINK rel="shortcut icon" href="icon.ico">    
<script>
  var randombgs=["../clip/backgr4.jpg", "../clip/backgr17.jpg", "../clip/backgr13.jpg"];
  document.write('<STYLE>body.demodvd {');
  document.write('background: rgb(250,250,150) ');
  document.write('url('+randombgs[Math.floor(Math.random()*randombgs.length)]+'") ');
  document.write('scroll top left no-repeat;');
  document.write('}</STYLE>');
</script>
</HEAD>    
<BODY class=demodvd>

A stilus.css-be a többi formázás mehet. Ez egyébként nagyon hasonló arra, amit razielanarki írt.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

End: Véletlenszerű háttérkép

Moon · 2008. Jan. 8. (K), 04.35

A lemezek elkészültek, köszönöm a segítséget!

A végleges kód ilyen lett, a \' kellett még, hogy jó legyen:

<SCRIPT>
var randombgs=["kep/bg001.jpg", "kep/bg002.jpg", "kep/bg024.jpg"];
document.write('<STYLE>BODY.demodvd {BACKGROUND: rgb(250,250,150) ');
document.write('url(\''+randombgs[Math.floor(Math.random()*randombgs.length)]+'\') scroll top left no-repeat}</STYLE>');
</SCRIPT>

<SCRIPT>
  var randombgs=["kep/bg001.jpg", "kep/bg002.jpg", "kep/bg024.jpg"];
  document.write('<STYLE>BODY.demodvd {BACKGROUND: rgb(250,250,150) ');
  document.write('url(\''+randombgs[Math.floor(Math.random()*randombgs.length)]+'\') scroll top left no-repeat}</STYLE>');
</SCRIPT>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés