Achtergrondplaatje veranderen II: aanpak met CSS
Hieronder zie je vijf knoppen. Als je die indrukt verschijnt er een plaatje op de achtergrond. De tekst
verandert niet. Als je op "Default" drukt verdwijnt het plaatje weer.
Het effect beperkt zich tot het actieve venster of frame.
Hier staat beschreven hoe je het plaatje op de achtergrond door JavaScript kunt laten veranderen. De code staat onderaan de bladzijde.
- Er worden twee items besproken:
- De HTML en het JavaScript om het achtergrondplaatje te veranderen.
- Beperkingen bij het gebruik van dit script.
- Het achtergrondplaatje verander je door een nieuwe waarde toe te kennen aan de eigenschap document.body.style.backgroundImage.
Zo zorgt de JavaScript opdracht:
document.body.style.backgroundImage = 'nieuw plaatje.jpg';
er voor dat het huidige plaatje op de achtergrond wordt vervangen door 'nieuw plaatje.jpg'. - Op deze plaats is dat geregeld in een JavaScript function achtergrondplaatje(), die in de <HEAD>
staat. Deze functie heeft een parameter, naam, die de filenaam van het gewenste plaatje bevat. De
function wordt aangeroepen als je op een van de knoppen hierboven drukt.
De knoppen gebruiken de event-handler onClick om achtergrondplaatje aan te roepen. - Als je op de knop "Default" drukt, verdwijnt het plaatje. Dat wordt gedaan door de JavaScript-opdracht:
document.body.style.backgroundImage = "". Je zet er dus gewoon een lege string in. Merk op dat de
achtergrondkleur zelf niet mee verandert.
- Gewoonlijk geef je een achtergrondplaatje op in de <BODY>-tag, bijvoorbeeld:
<BODY background="plaatje.jpg" ...>
Dit is voor gebruik met deze techniek alleen noodzakelijk als je wilt dat het plaatje gelijk wordt gebruikt bij het openen van de pagina. Op deze bladzijde is het attribuut background gewoon weggelaten. - Als je wilt dat er een achtergrond-plaatje is bij het openen van de pagina, kun je dat natuurlijk ook
regelen via CSS. In het STYLE-block zet je dan bij BODY::
background-image:plaatje.jpg
- Er is op deze bladzijde gebruik gemaakt van .GIF-plaatjes, waarvan de achtergrondkleur zelf "transparant" is gemaakt. Daardoor blijft de oorspronkelijke achtergrondkleur zichtbaar.
- Je kunt dit natuurlijk ook doen met plaatjes in .JPG-formaat. Het is bij dat formaat echter niet mogelijk om een transparante achtergrond te gebruiken.
- Natuurlijk kun je ook plaatjes in het nieuwe .PNG-formaat gebruiken. Dat wordt door alle grote browsers ondersteund.
- Als je de tekst op de bladzijde laat scrollen beweegt de achtergrond mee. Dat kan hinderlijk zijn, of zelfs ongewenst. In zo'n geval moet je de achtergrond opgeven als Watermerk. In het item Watermerk als achtergrond staat beschreven hoe je dat moet doen.
Opmerking:
Deze techniek werkt ook als je het volledige background-eigenschap van CSS gebruikt, bijvoorbeeld in
body {background:white url(plaatje.gif) repeat}
De code ziet er als volgt uit:
(Zet dit JavaScript in de <HEAD>)
<script>
function achtergrondplaatje(naam) {
document.body.style.backgroundImage = "url(" + naam + ")";
}
</script>
Opmerking:
Een beschrijving van het maken van knoppen is te vinden in het item "Knop
met tekst of een plaatje", in de rubriek "Formulieren". Er is hier gebruik gemaakt
van <BUTTON>-tags.
Kies de hoofdkleur van het achtergrondplaatje zodanig dat er een goed contrast is met de tekst. Zorg er ook
voor dat het plaatje "rustig" is en prettig oogt. Niet elk plaatje leent zich als achtergrond! (De plaatjes die hier zijn gebruikt
zijn een schoolvoorbeeld van hoe het NIET moet.)
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 II: Aanpak met CSS" en "Achtergrondkleur veranderen II: Aanpak met CSS".
