Achtergrondplaatje veranderen
Dit verhaal geldt voor (oudere) websites die in HTML 4 zijn opgezet. Voor nieuwere sites wordt aangeraden om de aanpak met CSS te gebruiken, volg de link op deze pagina.
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 aan de eigenschap document.body.background een nieuwe
waarde toe te kennen. Zo zorgt de JavaScript opdracht:
document.body.background = '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.background = "". 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. - 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 .PNG-formaat gebruiken. Dat wordt door alle grote browsers ondersteund.
Als je het achtergrondplaatje 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 het achtergrondplaatje, als je die wilt veranderen, niet in een style voorkomt.- De instelling waar het hier om gaat is:
background-image:url(.........); - 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.
- Natuurlijk is het ook mogelijk om dit met CSS te regelen. Zie daarvoor het item Achtergrondplaatje 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.
- 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.
De code ziet er als volgt uit:
(Zet dit JavaScript in de <HEAD>)
<script>
function achtergrondplaatje(naam) {
document.body.background=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" en "Achtergrondkleur veranderen".
