Autor Zpráva
dominik
Profil *
Dobrý den,
potřeboval bych prosím poradit jak udělat náhodně měnící se pozadí v CSS vrstvě (např. header1. gif; header2.gif atd). Bohužel celý web mám v html, takže by bylo komplikované vše převádět do php.
Prohledal sem si celou diskuzi a našel pár dotazů přímo na toto téma, ale to co potřebuju já sem nikde nenašel. Ve zdrojovém kódu mám toto a potřeboval bych aby se mi background-image náhodně měnila, myslím, že se na to musí nějak pomocí java scriptu..

<style type="text/css">
<!--
#top {
position:absolute;
width:1000px;
height:125px;
z-index:1;
background-image: url(pozadi/header.gif);
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 20;
visibility: visible;
}
-->
</style>


díky za každou radu
habendorf
Profil
1) Vygeneruješ si náhodné číslo
2) Buď to přes document.write napíšeš přímo do <style>, nebo budeš pro body.style měnit background, asi na onload na body.


Která část není jasná?
dominik
Profil *
No, ja se omlouvám, ale jsem fakt amatér, takže abych řek pravdu tak téměř netušim, která bije, jak se řiká.. No jestli máš náladu a čas se s tím zahazovat tak bych Tí byl velice vděčen, pokud ne tak si snad nějak poradim sám.. Každopádně dík
Bubák
Profil
Koukni se na
Příklad: vypsání náhodného přísloví www.jakpsatweb.cz/javascript/pole.html - je to skoro na konci.
Timy
Profil
Co takto?


<head>
<title>nahodne pozadi</title>
<style>
.red{background:red}
.blue{background:blue}
.black{background:black}
</style
</head>
<body>
<script>
cislo=Math.ceil(Math.random()*3)-1;
barvicky=new Array("red","blue","black");
document.body.className=barvicky[cislo];
</script>
</body>
habendorf
Profil
Timy: Osobně bych spíš než className tady volil přímý zápis (body.style.background...). Důvodem je to, že body už může nějakou class mít.

Takže bys pak musel dávat document.body.className+=' '+barvicky[cislo]; což by zase zlobilo, pokud by ještě body žádnou class nemělo, takže by to vedlo k nějakým podmínkám ... imho zbytečně složité.
dominik
Profil *
Ja potřebuju, aby se mi v background měnily určitý gif obrázky ne jen barva pozadí...
dominik
Profil *
Tak sem si s tím trochu pohrál do <style> sem napsal todle:
#top {
position:absolute;
width:1000px;
height:125px;
z-index:1;
background-image: url(pozadi/1.gif);
background-image: url(pozadi/2.gif);
background-image: url(pozadi/3.gif);
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 20;
visibility: visible;
}

A těď si nevím rady s tím scriptem.. poradíte?
Bubák
Profil
Koukni, co psal Timy. Napíšeš tři (nebo jiný počet) třídy s pozadím a JS už jednu z nich "vylosuje".
Ty máš jedno ID (#top) a v něm postupně napsané tři pozadí, tak to zase vymaž.

takže takhle nějak (třída nebo ID nesmí začínat číslem, ale můžeš mít třeba .pozadi1):
.prvni {background-image: url(pozadi/1.gif);}
.druhe {background-image: url(pozadi/2.gif);}
...

Taky by měla funguvat kontextová deklarace
#top .prvni {...}
#top .druhe {...}

Skript je hotový, upravíš si pouze pole, pro přehlednost si můžeš přejmenovat proměnnou "barvicky" třeba na "pozadicka" ;-)
habendorf
Profil
Nechápu proč se tam pokoušíš nacpat tři obrázky na pozadí v jednom stylu. Vem si řešení od Timyho a jen přepiš barvy na obrázky. V čem je problém?
dominik
Profil *
Tak jo, jestli sem to teda pochopil:

#top .prvni {
position:absolute;
width:1000px;
height:125px;
z-index:1;
background-image: url(pozadi/1.gif);
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 20;
visibility: visible;
}
#top .druhe {
position:absolute;
width:1000px;
height:125px;
z-index:1;
background-image: url(pozadi/2.gif);
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 20;
visibility: visible;
}


Jen cože to mám přesně změnit v tom scriptu??
Bubák
Profil
Není třeba deklarovat 2× celou hlavičku (#top), stačí jednou. Měníš pouze pozadí.

<style>
#top {
position:absolute;
width:1000px;
height:125px;
z-index:1;
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 20;
visibility: visible;
}

/* pozadi */
#top .prvni {
background-image: url(pozadi/1.gif);
}
#top .druhe {
background-image: url(pozadi/2.gif);
}
</style>

<!-- losování pozadí -->
<script>
cislo=Math.ceil(Math.random()*2)-1;
pozadi=new Array("prvni","druhe");
document.body.className=pozadi[cislo];
</script>

Netestoval jsem to, ale mělo by to fungovat.
dominik
Profil *
Tak nevím, nějak se to ono pozadi vubec nezobrazí. Nevíš čím to může být?
dominik
Profil *
Ufff, konečně hotovo. Nakonec sem to udělal pomocí zvláštní php rotátoru - myslim že nejlepší rešení jaký se dalo uplatnit.
Jinak chci poděkovat všem, kteří se mi sanžili pomoct či poradit. opravdu díky
Toto téma je uzamčeno. Odpověď nelze zaslat.

0