[CSS] Andere achtergrond kleur als pagina reloads.

Pagina: 1
Acties:

  • casefan
  • Registratie: Maart 2006
  • Laatst online: 06-04 21:31

casefan

Elektrotechniek!

Topicstarter
Beste tweakers,

Ik ben bezig met een website en het leek mij een leuk idee om elke keer wanneer je de pagina herlaad, de achtergrond kleur veranderd. :9

Na wat googlen, kom ik er nog steeds niet uit.
Ik wil dit graag in CSS doen, dan hoef ik het maar een keer in mijn .css bestand te zetten, ipv in elke HTML pagina waar ik het wil gebruiken. ;)

Ik heb al wat dingen opgezocht, maar op de websites die ik tegenkwam, gebruikten ze Javascript en PHP, talen die ik alletwee niet kan gebruiken, wegens beperkte mogelijkheden van mijn webhosting. |:(

Kan iemand mij helpen, met het geven / uitleggen van de code?


Greetz,

Casefan

p.s. Ik kan redelijk goed overweg met HTML & CSS maar ik ben geen expert.
p.p.s Het hoeft niet persée random, uit een voorgedefineerde lijst is ook goed.

  • SH4D3H
  • Registratie: Juni 2004
  • Laatst online: 04-10 13:25
Waarom kun je geen JavaScript gebruiken?
Dat heeft niets met de server te maken, wordt uitgevoerd op de client?

  • mithras
  • Registratie: Maart 2003
  • Niet online
casefan schreef op zaterdag 02 december 2006 @ 21:11:
Beste tweakers,

Ik ben bezig met een website en het leek mij een leuk idee om elke keer wanneer je de pagina herlaad, de achtergrond kleur veranderd. :9
Alleereerste vraag: weet je het zeker. Bekijk een aantal gerenommeerde sites en zie dat die er elke keer hetzelfde uitzien (of een compleet ander thema gebruiken) en niet een veranderlijke achtergrond hebben ;)
Ik heb al wat dingen opgezocht, maar op de websites die ik tegenkwam, gebruikten ze Javascript en PHP, talen die ik alletwee niet kan gebruiken, wegens beperkte mogelijkheden van mijn webhosting. |:(
Javascript is geen serverside taal, maar een clientside taal. Het is dus niet afhankelijk van je server, maar van de browser van je bezoeker. En ga er maar vanuit dat de hedendaagse browser (min of meer) goed om kan gaan met javascript. Het moet dus geen probleem zijn javascript te gebruiken :)
Greetz,

Casefan
offtopic:
Je hoeft hier @ GoT elkaar niet te groeten ;)


Wat meer antwoord op je vraag (overigens makkelijk hier en op Google te vinden). Met volgende code geef je het element met het id="waarde" een achtergrondkleur rood (hexadecimaal rgb geeft dan ff0000):
JavaScript:
1
document.getElementById(waarde).style.background-color = #ff0000;
De rest moet je zelf wel uitkomen lijkt me ;)
Wat zoekwerk op Google kan je al veel informatie geven: [google=javascript change style] en [google=javascript random]

[ Voor 3% gewijzigd door mithras op 02-12-2006 21:27 . Reden: Google's zoektermen toegevoegd ]


  • casefan
  • Registratie: Maart 2006
  • Laatst online: 06-04 21:31

casefan

Elektrotechniek!

Topicstarter
Bedankt voor de reacties,

Het was niet persee dat mijn host geen Javascript ondersteund (heeft niks met elkaar te maken)

Meer dat ik niet zo veel van javascript snap.

Na nog meer googlewerk ben ik op dit uitgekomen:


tussen de HEAD en BODY van desbetreffende pagina zet ik:


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<SCRIPT LANGUAGE="JavaScript">
<!--

function setbackground()
{

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF";

if(index == 1)
ColorValue = "FFCCCC";
if(index == 2)
ColorValue = "CCAFFF";
if(index == 3)
ColorValue = "A6BEFF";
if(index == 4)
ColorValue = "99FFFF";
if(index == 5)
ColorValue = "D5CCBB";
if(index == 6)
ColorValue = "99FF99";
if(index == 7)
ColorValue = "FFFF99";
if(index == 8)
ColorValue = "FFCC99";
if(index == 9)
ColorValue = "CCCCCC";

document.bgColor=ColorValue;

}
-->
</SCRIPT>


En dan zet ik in de <body> tag het volgende:


HTML:
1
<body onLoad="setbackground();">


Ik ben er uit,

iig heel erg bedankt voor de reacties,

En toch groet ik// :+


Greetz,

Casefan

  • mithras
  • Registratie: Maart 2003
  • Niet online
Wat netter is om dan een array te formuleren waar alle achtergrondkleuren in staan.

Vervolgens lees je de grootte van de array uit en kies je een random getal die in de range van je array ligt. Dat getal kan je gebruiken om de value uit de array te halen van een bepaalde key (als in: array[key]=value). En die schrijf je als achtergrondkleur.

Dit heeft als voordeel dat de code overzichtelijker is (niet 100x een if statement) en dat je grootte van array dynamisch is. Nu moet je zowel de if-statement lijst als het getal 9 veranderen.
Met een array voeg je onderaan een record toe, en die wordt automatisch meegenomen :)

Wat voor jezelf ook overzichtelijker is, is om in je head een dergelijke verwijzing op te nemen:
HTML:
1
<script type="text/javascript" src="pad/naar/script.js"> </script>
Verder moet je dit óf opnemen tussen <body> en </body>, óf tussen <head> en </head>. Tussen </head> en <body> hoor je dat niet te doen.

[ Voor 18% gewijzigd door mithras op 02-12-2006 22:47 ]


  • Victor
  • Registratie: November 2003
  • Niet online
JavaScript:
1
2
3
4
5
6
7
8
9
10
function setRandomBackground() {
    var bgColors = [
        "#000",
        "#333",
        "#666",
        "#999"
    ];

    document.getElementsByTagName("html")[0].style.backgroundColor = bgColors[(Math.floor(Math.random() * bgColors.length))];
}


Plaats in de array de kleuren waar je het script uit wilt laten kiezen en laat de functie setRandomBackground() aanroepen als de pagina geladen wordt. Je zou het als volgt in het HEAD element kunnen zetten:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    //<![CDATA[
        (function() {
            var bgColors = [
                "#000",
                "#333",
                "#666",
                "#999"
            ];

            document.getElementsByTagName("html")[0].style.backgroundColor = bgColors[(Math.floor(Math.random() * bgColors.length))];
        })();
    //]]>
</script>


Nog beter is het om het in een JS file zetten en hier een referentie naar plaatsen in het HEAD element, waar mithras86 hierboven een voorbeeld van geeft.
Pagina: 1