losowa grafika w headerze opisanym w pliku css - jak?

[Aeon]

Witam,

Kupiłem szablon, w którym na górze strony jest jaśniejsze niebieskie tło + zdjęcie palm z bokami przechodzącymi w to tło.

Link: www.aeon.nazwa.pl/vivaldi/ (http://www.aeon.nazwa.pl/vivaldi/)

W pliku php strony odnośnie tej grafiki jest tylko tyle:

<div id="header">
<h1 title="Vivaldi.org.pl - Pordóże na cztery pory roku" class="space"><a title="Vivaldi" href="<?php echo $_SERVER['PHP_SELF']?>"><img src="<?php echo $path ?>/images/logo.png" alt="Logo" /></a></h1>
</div>

natomiast cała reszta opisana została w pliku css a wygląda to tak:

/*---------------------------------------------------------structure---*/
#body {
background:url(../images/tail.gif) repeat-x 0 0 #001b2f;
}
.main {
width:887px;
padding:0px 0px 20px 0px;
}
/*-------------------------------------header---*/
#loinform {
height:63px;
overflow:hidden;
width:100%;
}
#header {
background:url(../images/header_bg.jpg) no-repeat right 0;
height:150px;
}
#header .space {
padding:22px 0px 0px 44px;
}
#logo {
height:64px;
padding:0px 0px 0px 34px;
}
#topmenu {
height:43px;
width:100%;
overflow:hidden;
background:url(../images/topmenu_left.gif) no-repeat 0 0 #286e92;
}

gdzie tail.gif to plik jasnoniebieskiego tła a plik header_bg.jpg to plik zdjęcia z palmami.

Teraz pytanie: czy istnieje taka możliwość żeby wstawić w kod arkusza css jakiś css'owy skrypcik powodujący wybieranie losowego pliku graficznego zamiast ściśle ustalonego tła i zdjęcia? Chciałbym wstawić 4 zdjęcia i 4 tła do nich pasujące na serwer tak aby przy każdym wejściu na stronę pojawiało się inne losowo wybrane.

Wiem że plik css to tylko informacyjny plik i raczej skryptu sie tam nie da wsadzić ale może amerykańscy naukowcy wymyślili coś o czym jeszcze nie wiem i sie jednak da? :D A może plik php jakoś zmodyfikować?

Mam sposób na to "od tyłu" ale wolałbym mniej łopatologicznie to zrobić wstawiając w odpowiednie miejsce jakiś skrypcik... Tylko czy się da? :)

Help :)

[a_m]

przyjrzyj się uważnie ja purity

[zbig1972]

To o czym piszesz zostało zastosowane w templatce etosha: http://www.etosha-namibia.ch/.
W tej templatce w pliku index.php jest następujący zapis:

<?php
if ($tmpTools->getParam('headerimg') == 'flexheader') {
} else {
include_once (dirname(__FILE__).DS.'/header/settings.php');

$imgid = rand(1,sizeof($header));
$headerImg = sprintf($tmpTools->templateurl()."/header/header_%02d.jpg",$imgid);


Ten szabon posiada katalog header, a w nim plik settings.php:

<?php

defined( '_JEXEC' ) or die( 'Restricted access' );

$header[1]->img = "header_01.jpg";

$header[2]->img = "header_02.jpg";

$header[3]->img = "header_03.jpg";


?>
oraz trzy zdjęcia header*.jpg
Zdjęcia przy wejściu na stronę zmieniają się losowo. Mam nadzieje, że to ci pomoże.

[Aeon]

zbig1972, no ok ale mój szablon w php ma tylko opisany div że jego id=header i jest tam też plik loga podany.. cała reszta, nie tylko tło, rozmiar i umieszczenie loga i zdjęcia ale i rozmiar i położenie całego modułu jest zapisane w pliku css, musiałbym wszystko odczytywać dalej z css'a tylko w jakiś sposób po drodze losowo zmieniać używany graficzny plik... Albo, odłączyć headera od css'a i opisać go całkowicie w php, wtedy tylko skrypt który podałeś by sie mógł jakoś przydać, choć ja bym raczej settings.php wsadził w index.php tak żeby nie robić dwóch osobnych plików tylko wszystko załatwić funkcją rand.. tylko to chyba będzie zbyt skomplikowane dla mnie ale spróbuję :P

a_m a ja purity zaraz przeglądnę bo rzeczywiście jest tam grafika losowa :)

PS. a_m oo to jest właśnie to o co mi chodziło - div czyta info z css'a ale ma zdefiniowany dodatkowo że tak powiem odgórnie styl już w php odnośnie background który jest losowy. gitara. ale jest jedno ale.. u mnie będzie nie tylko losowo plik zdjęcia wybierany ale i plik tła. Jak to zrobić żeby przy losowym wybieraniu zdjęcia i tła, 'los' padał zawsze na tło które do zdjęcia pasuje?

np. żeby losowo wybierając zdjęcia:
foto1
foto4
foto2
foto3
foto2 itd

wybierał do tego niby też losowo ale zawsze odpowiednie tła czyli w takiej kolejności:
tlo1
tlo4
tlo2
tlo3
tlo2 itd..

?? :D

nie biorąc pod uwagę tego że los może wybrać tło niepasujące do zdjęcia, część kodu mojego index.php wyglądałaby jakoś tak:



<div id="header" style="background: url(<?php echo $path ?>/images/tla/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/tla'); ?>) repeat">
<h1 title="Vivaldi.org.pl - Pordóże na cztery pory roku" class="space"><a title="Vivaldi" href="<?php echo $_SERVER['PHP_SELF']?>"><img src="<?php echo $path ?>/images/foty<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/foty'); ?>) no-repeat"></a></h1>
</div>

[a_m]

czyli nie losowo ale z puli i wg kolejności? czy z puli wg innego kryterium? jak chcesz dopasowywać foty do podstron > dowolny moduł do ich prezentacji i jego kopie z innymi obrazami dla różnych pozycji menu / raczej ręczna robótka, chyba, że źle doczytałem

[Aeon]

nie chce dopasowywać fot do podstron, ale o takim rozwiązaniu wiem.. tyle że u mnie header to nie moduł tylko miejsce na stronie opisane w css pod modułem user2 (login) a nad user3 (mainmenu). jak by u mnie header był modułem to by była bajka.

jeśli byłoby prosciej, mogłyby się te grafiki zmieniać kolejno, np foto1+tlo1, foto2+tlo2 itd. chodzi mi głownie o to żeby przy odświeżaniu/przeglądaniu strony za każdym razem tło i zdjęcie były nowe, ale dopasowane do siebie czyli do foty3 ma być tło3. a czy to bedzie losowo czy pokolei - to juz nie ma dużej roli.

ja wymyśliłem coś takiego (łopatologiczne ale automatyczne :P): na końcu pliku index.php daję krótki skrypt odpowiadający za zmianę nazwy plików tła i fot na serwerze. Strona zawsze czytać będzie foto1 + tło1 ale przy każdym otwarciu strony i załadowaniu zdjęcia, na końcu strona wykona skrypt zmieniający:

foto1 -> foto2
foto2 -> foto3
foto3 -> foto4
foto4 -> foto1

i analogicznie z tłami, dzięki czemu by to było może nie losowo, co nie jest najważniejsze, ale przy każdym otwarciu byłoby inne zdjęcie z innym tłem, i zdjęcie + tło pasowałyby zawsze do siebie.

Ale martwił by mnie czas pracy skryptu, np czy możliwe by było że dwie osoby w jednym momencie otwierają stronę i zanim skrypt pierwszego pozmienia wszystkie nazwy to skrypt drgiego internauty zdąży zacząć znowu zmieniać nazwy i wszystko się pomiesza?

[a_m]

tło dla haeder - to te palmy - chcesz: palmy - tło niebieskie, renifery - białe, tipi - preria?

[Aeon]

hmm, mógłbym zrobić tak:

if(foto5 exist)
foto5 -> foto6
foto4 -> foto0
foto3 -> foto4
foto2 -> foto3
foto1 -> foto2
foto0 -> foto1
foto6 ->foto5

else
doNothing (nie zmienia nazw plików, i tak po przeładowaniu nazwy będą już zmienione przez poprzedniego usera który uruchomił skrypt ułamek sekundy wcześniej)

Daje mi to zabezpieczenie, że jak ktoś odświeża stronę i uruchamia skrypt to zmienia foto5 na foto6, przez co foto5 nie istnieje i w czasie działania skryptu nikt inny go nie uruchomi. Skrypt kończąc zmienia foto6 na foto5 dzięki czemu nowe odświezenie już ten skrypt może ponownie uruchomić. co o tym myślisz?

PS. pozostaje jeszcze ułamek sekundy po foto1 -> foto2 a przed foto0 -> foto1, wtedy nie istnieje foto1 i szablon wczyta sie bez palm.. czy ten ułamek sekundy może trwać długo czy zmiany robią się błyskawicznie?

---------- Post dodany o 00:15 ---------- Poprzedni post był o 00:14 ----------


tło dla haeder - to te palmy - chcesz: palmy - tło niebieskie, renifery - białe, tipi - preria? tak, dokładnie tak jak napisałes

[a_m]

ok rób sobie, temat ewoluuje i pomału nie widać związku z jego początkiem

[Aeon]

widać widać tylko jak narazie padł tylko jeden pomysł - z ja purity - bardzo dobry, tylko to losowe wybieranie tła nie będzie zawsze pasowało do losowego wybierania zdjęcia i renifer może znaleść się na prerii.. to odcięcie headera od css'a z przykładu zbig'a nie bardzo wchodzi w grę.. póki ktoś nie podrzuci pomysłu jak pogodzić losowość z przykładu w ja purity (bo ja nie mam pojęcia) to walnąłem ci moją łopatologiczną metodę na ten problem i chciałem usłyszeć jakąś opinię.. bo jeśli nikt nie wymyśli dopieszczenia pomysłu z ja purity to moja łopatologia będzie wszystkim co mi pozostanie :P

więc, zmienianie nazw plików na serwerze może trwać sekundę? 0.1s? a może 0.000001s? bo jak 1s to cienko. jak 0.000001s to już można poważniej myśleć o łopatologicznym rozwiązaniu...?

[a_m]

więc zostaw problem dopasowania zdjęcia do tła i zrób renifera na śniegu, tipi na prerii, palmy w oazie - jako tła

[Aeon]

popatrz jak zrobiony jest szablon, jest część środkowa o szerokości ok 880pix, poza tą częścią tło to plik tail.jpg, a w tej części tłem też jest tail.jpg tyle że z prawej strony teo 880pixelowego headeru jest zdjęcie palmy header_bg.jpg. gdybym nawet cały 880pix header wypełnił jednym plikiem jpg na którym byłaby preria z tipi czy śnieg z reniferem to pozostaje jeszcze zlać to efektem przejścia z jasnoniebieskim tłem tail.jpg ciągnącym się na boki poza 880pix pudłem. to ciągnące się tło musi być, bo na różnych kompach są różne rozdzielczości i to tło wypełnia boki strony jeśli rozdziałka jest duża.

zmieniajac zdjęcie na renifera i śnieg pozostaje również zmienić boczne tło więc pętla się zamyka i znowu są dwa pliki naraz do zmiany przy każdym otwarciu strony na inne.

---------- Post dodany o 01:02 ---------- Poprzedni post był o 00:45 ----------

w sumie to chyba po kilku godzinnym rozmyślaniu znalazłem rozwiązanie problemu.. zrobiłbym coś takiego:

zaraz po <body> wsadziłbym skrypt:
$fota = "images/foty".<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/foty');
$tlo = "images/tla/tlo".<5znak zczytany ze zmiennej $fota>.".jpg";

a w divie odpowiadającym za header byłoby coś takiego:


<div id="header" style="background: url($tlo) repeat">
<h1 title="Vivaldi.org.pl - Pordóże na cztery pory roku" class="space"><a title="Vivaldi" href="<?php echo $_SERVER['PHP_SELF']?>"><img src="$fota"></a></h1>
</div>


tylko teraz muszę to zapisać jako php a nie bazgroły, i nie bardzo wiem jak (np skrypt czytający 5 znak z danej zmiennej).. jak ktoś znajdzie czas to by mógł pomóc :) div z mojego index.php jest na 1 stronie w 1 poście jakby co.. jak sobie nie dam rady to zostanie łopatologia :D