Autor Zpráva
dominik
Profil *
#1 · Zasláno: 10. 1. 2007, 17:40:25
Odpovědět Citovat
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
#2 · Zasláno: 10. 1. 2007, 17:58:04
Odpovědět Citovat
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 *
#3 · Zasláno: 10. 1. 2007, 21:07:21
Odpovědět Citovat
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
#4 · Zasláno: 10. 1. 2007, 23:00:39
Odpovědět Citovat
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
#5 · Zasláno: 10. 1. 2007, 23:26:01 · Upravil/a: Timy
Odpovědět Citovat
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
#6 · Zasláno: 10. 1. 2007, 23:38:45
Odpovědět Citovat
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 *
#7 · Zasláno: 11. 1. 2007, 09:43:52
Odpovědět Citovat
Ja potřebuju, aby se mi v background měnily určitý gif obrázky ne jen barva pozadí...
dominik
Profil *
#8 · Zasláno: 11. 1. 2007, 10:06:06
Odpovědět Citovat
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
#9 · Zasláno: 11. 1. 2007, 11:21:27
Odpovědět Citovat
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
#10 · Zasláno: 11. 1. 2007, 11:25:58
Odpovědět Citovat
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 *
#11 · Zasláno: 11. 1. 2007, 14:41:20
Odpovědět Citovat
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
#12 · Zasláno: 11. 1. 2007, 15:18:47
Odpovědět Citovat
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 *
#13 · Zasláno: 11. 1. 2007, 16:08:58
Odpovědět Citovat
Tak nevím, nějak se to ono pozadi vubec nezobrazí. Nevíš čím to může být?
dominik
Profil *
#14 · Zasláno: 13. 1. 2007, 21:28:13
Odpovědět Citovat
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
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0