Lettergrootte en -opmaak wijzigen
De tekst op deze
bladzijde ziet er uit zoals de rest van deze website. Als je echter de knop Aan indrukt en dan met
met de muis over de tekst gaat wordt deze groter. Het effect verdwijnt als je de knop Uit indrukt
en komt weer terug als je op Aan drukt. Dit gebeurt op deze hele pagina.
De (donkerrood gekleurde) titel en de tekstkopjes op deze pagina gedragen zich weer anders.
Bij de titel veranderen de grootte en de voor- en achtergrondkleuren. Ook verandert het font. Daarbij verandert
de titel niet meer terug, tenzij je de knop Uit hebt ingedrukt.
Bij de tekstkopjes veranderen de opmaak en de kleur.
Hier staat beschreven
hoe je dat doet. De code staat onderaan op deze pagina. Je kunt hem ook downloaden voor eigen gebruik.
Druk op de knop Uit alvorens deze bladzijde te gaan lezen. Dat is veel rustiger voor je ogen!
Je kunt de knoppen ook weglaten, zodat het effect er altijd is. De dingen die je hiervoor moet veranderen
staan hier ook beschreven.
- Er worden twee items besproken:
- De werking van de knoppen Aan en Uit.
- Het veranderen van de grootte en opmaak van de tekst.
- In de <HEAD> van deze pagina staat een klein JavaScriptje waarin een variabele k_aan wordt gemaakt; deze krijgt de waarde false.
- Als je de knop Aan indrukt krijgt k_aan de waarde true; als je de knop Uit indrukt wordt k_aan op false gezet.
- De opmaak van de
tekst verandert als k_aan de waarde true heeft; anders gebeurt er niets.
Op deze manier kan het effect worden uitgeschakeld, zodat het een beetje leesbaar blijft.
Merk op dat de titel van deze pagina zich iets anders gedraagt, maar dat heeft ook te maken met de waarde van k_aan. - De knoppen Aan
en Uit zijn "gewone" buttons, zoals die zijn beschreven in het item "Knop met tekst of een plaatje".
- Er zijn eigenlijk drie
effecten op deze pagina aanwezig:
- De titel.
- De tekstkoppen.
- De tekst zelf.
- Voor elk stukje tekst (Titel, kopje, paragraaf, list-element, enz.) zijn er twee STYLE-id's gemaakt: x_PLAIN en x_HOVER.
- Elk stukje tekst heeft
een referentie aan het ID, bijvoorbeeld <P id="P_PLAIN">. De verandering op
het scherm ontstaat doordat het ID wordt veranderd van P_PLAIN in P_HOVER en weer
terug.
- Als je met de muis over de tekst gaat wordt met behulp van onMouseOver het ID gewijzigd in P_HOVER, dat wil zeggen: als k_aan = true.
- Als je de muis
van de tekst af schuift wordt het ID teruggezet op P_PLAIN. (Bij de titel gebeurt alleen
als k_aan = false.
- De wijziging wordt aangebracht in het style-deel van het betreffende tekst-object. Dat gebeurt door de waarde te veranderen van this.style.
- Het is niet mogelijk om de class te veranderen. Daarom werkt dit alleen met ID.
- Toch is zonodig behalve een ID echter ook een referentie aan een class geplaatst. Dat is gedaan om eigenschappen die niet in de ID zijn genoemd toch te gebruiken. (De classes zijn in de .CSS-stylesheet gedefiniëerd; file bbstyles.css, zie ook het item "Eenvoudige <style>-sheets voor tekst".
Gebruik:
- De code staat gedeeltelijk in de <HEAD>.
- De rest van de code staat in de <body> op de plaats waar die nodig is.
De code ziet er als volgt uit:
(Zet deze code in de <HEAD> (de code van bbstyles.css is bijgevoegd in de downloadfile.))
