Tekstkleur veranderen
Voor een nieuwe (of recent gebouwde) site wordt aangeraden om de aanpak met CSS te gebruiken, volg de link op deze pagina.
Hieronder zie je zes knoppen. Als je die indrukt verandert de kleur van de tekst. Dat wil zeggen: De tekst
die tussen de <body> ... </body>-tags staat. De kleur van de klein gedrukte tekst, de alinea-koppen
en de hyperlinks verandert niet.
Het effect beperkt zich tot het actieve venster of frame.
Hier staat beschreven hoe je de kleur van de tekst door JavaScript kunt laten veranderen. De code staat onderaan de bladzijde.
- Er worden twee items besproken:
- De HTML en het JavaScript om de tekstkleur te veranderen.
- Beperkingen bij het gebruik van dit script.
- De tekstkleur verander je door aan de eigenschap document.fgColor een nieuwe waarde toe te kennen. Zo zorgt de
JavaScript opdracht:
document.fgColor = '#000000';
er voor dat de tekstkleur zwart wordt. - Op deze plaats is dat geregeld in een JavaScript function tekstkleur(), die in de <HEAD>
staat. Deze functie heeft een parameter, code, die de gewenste kleur bevat. De function wordt aangeroepen als je op
een van de knoppen hierboven drukt.
De knoppen gebruiken de event-handler onClick om de function tekstkleur aan te roepen.
Als je de tekstkleur 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 tekstkleur die je wilt veranderen niet in een style voorkomt.
De CSS-instelling waar het hier om gaat is:color:#......;.- Het werkt ook niet als je de tekstkleur apart hebt ingesteld met een <font>-tag. Hierbij geldt hetzelfde
als voor de style.
- Als je de tekstkleur verandert (met een van de knoppen), verandert de kleur van de kopjes bovenaan elke paragraaf niet mee. Van deze zaken is de kleur in een <style>-tag vastgelegd.
- 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 tekstkleur wilt veranderen zet je die het beste in het text-attribuut in de <body>-tag.
Op deze plaats is gebruikt:
<body text="#000000" .......>
Opmerking:
Natuurlijk is het ook mogelijk om dit met CSS te regelen. Zie het item Tekstkleur
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 tekstkleur(code) {
document.fgColor=code;
}
</script>
Een toepassing: knipperende tekst.
Hieronder zie je een knop. Als je die indrukt verschijnt er een venster met wat tekst. Als je op de tekst in dat venster klikt begint de tekst te knipperen. Je zou dit kunnen gebruiken voor het geven van een waarschuwing.
De truc die hier wordt uitgehaald is om -zodra de tekst wordt aangeklikt- een function te starten die de tekstkleur en de achtergrondkleur gelijk maken. Het lijkt nu of de tekst verdwijnt. Een seconde later wordt de tekstkleur zwart gemaakt. Weer een seconde later worden de tekstkleur en de achtergrondkleur weer gelijk gemaakt, enz.
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 tekstkleur zodanig dat er een goed contrast is met de achtergrond. Let vooral goed op het contrast als de
achtergrond een plaatje is.
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",
"Achtergrondkleur veranderen" en "Achtergrondplaatje veranderen".
