Achtergrondkleur veranderen
Hieronder zie je vijf knoppen. Als je die indrukt verandert de kleur van de achtergrond. De kleur
van de tekst verandert niet.
Het effect beperkt zich tot het actieve venster of frame.
Hier staat beschreven hoe je de kleur van de achtergrond door JavaScript kunt laten veranderen. De code staat onderaan de bladzijde.
- De HTML en het JavaScript om de achtergrondkleur te veranderen.
- Beperkingen bij het gebruik van dit script.
- De achtergrondkleur verander je door aan de eigenschap document.bgColor een nieuwe waarde toe te kennen.
Zo zorgt de JavaScript opdracht:
document.bgColor = '#ffffff';
er voor dat de achtergrondkleur wit wordt. - Op deze plaats is dat geregeld in een JavaScript function achtergrondkleur(), die in de <HEAD>
staat. Deze functie heeft een parameter, code, die de gewenste kleur bevat. De function wordt aangroepen
als je op een van de knoppen hierboven drukt.
De knoppen gebruiken de event-handler onClick om de function achtergrondkleur aan te roepen.
- Als je de achtergrondkleur in een style hebt voorgeschreven zal dit niet werken.
Dit komt omdat de instellingen die in een style zijn gemaakt in de browser voorrang hebben boven andere instellingen.
Je zult er dus voor moeten zorgen dat de achtergrondkleur, als je die wilt veranderen, niet in een style voorkomt.
De instelling waar het hier om gaat is:background-color:#......; - Het maakt hierbij niet uit of de instelling is gemaakt in een <style>-tag of in een Style-sheet
(file.css) die met een <link>-tag in de HTML-code is opgenomen.
- Als je de achtergrondkleur wilt veranderen zet je die het beste in het bgcolor-attribuut in de
<body>-tag. Op deze plaats is gebruikt:
<body bgcolor="#e4e9f6" .......>
Opmerking:
Natuurlijk is het ook mogelijk om dit met CSS te regelen. Zie het item Achtergrondkleur
veranderen II: aanpak met CSS.
De op deze bladzijde besproken aanpak heeft de voorkeur voor bestaande (wat oudere) websites, die nauwelijks of geen
CSS gebruiken. Voor nieuwe en recente websites die CSS gebruiken voor de opmaak is de CSS-aanpak de beste methode.
De code ziet er als volgt uit:
(Zet dit JavaScript in de <HEAD>)
<script>
function achtergrondkleur(code) {
document.bgColor=code;
}
</script>
Een toepassing: knipperende achtergrond.
Hieronder zie je een knop. Als je die indrukt verschijnt er een venster met wat tekst. Als je ergens op de tekst in dat venster klikt begint de achtergrond te knipperen. Je zou dit kunnen gebruiken voor het geven van een waarschuwing.
De aanpak is om -zodra de tekst wordt aangeklikt- een function te starten die de huidige achtergrondkleur
bewaart en zelf een function aanroept om de achtergrondkleur te veranderen in rood. Na een wachttijd van 0,1
seconde wordt de oorspronkelijke achtergrondkleur hersteld. Vervolgens wordt na weer 0,1 seconde de achtergondkleur
weer rood gemaakt, enz.
Dit wordt een paar keer herhaald.
Opmerking:
Een beschrijving van het maken van knoppen is te vinden in het item "Knop
met tekst of een plaatje". Er is hier gebruik gemaakt van <button>-tags.
De kleur van de button-tekst is ingesteld met behulp van een class in een <style>.
Kies de achtergrondkleur zodanig dat er een goed contrast is met de tekst.
Een beschrijving van kleuren in HTML vind je in het item "Kleurcodes
voor tekst, links en achtergrond".
Zie ook de items "Over kleurgebruik op je website",
"Tekstkleur veranderen" en "Achtergrondplaatje veranderen".
