[CSS] Andere achtergrond kleur als pagina reloads. - Softwareontwikkeling

zaterdag 2 december 2006 21:11

Acties:

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.

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.

zaterdag 2 december 2006 21:13

Acties:

SH4D3H

Waarom kun je geen JavaScript gebruiken?
Dat heeft niets met de server te maken, wordt uitgevoerd op de client?

zaterdag 2 december 2006 21:25

Acties:

mithras

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.

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 ]

zaterdag 2 december 2006 22:24

Acties:

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:

 
<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

zaterdag 2 december 2006 22:43

Acties:

mithras

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 ]

zondag 3 december 2006 14:09

Acties:

Victor

JavaScript:

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:

<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.